Question

我想在我的网络应用上实现点击背景颜色效果，就像本机应用程序那样（例如，像iOS的gmail一样 - 当你点击点击进入电子邮件时，背景以蓝色突出显示）。

CSS：在Android上运行良好。

借助iOS 9.3，苹果取消了350毫秒的点击延迟，我很高兴找到它！我兴奋地删除了fastclick.js。但是，当用户点击时，：活动似乎无法正常工作！他们的开发者论坛是一个笑话。无人问津。

我尝试再次添加fastclick.js，这使得：在iOS上再次激活 - 但随后它会在滚动时触发。

本地可能有50毫秒的延迟，因此只有在点击链接时才会突出显示。

我认为这个CSS用于此目的：

-webkit-tap-highlight-color: #eee;

但是，当我尝试使用它时（在iOS 9.3上的safari中），它也会覆盖元素上的所有内容（文本）（整个元素完全变为灰色，文本和所有内容）。我错过了什么吗？为什么在使用它时会覆盖div /元素的全部内容？它的常见用法不是背景颜色吗？

更新：我已经在下面推出了自己的解决方案。希望这可以帮助那些使用网络应用程序的人。

Answer 1

首先，就我所知，主动在Chrome上工作正常。他们似乎已经实现了操作系统级别的延迟。

第二：正如我上面所说的那样，我尝试将iOS中的fastclick.js添加回来以获得：甚至可以在所有情况下工作。一旦添加，我至少能得到：活跃的工作 - 但它会在尝试滚动时激活。

所以，因为Apple对待像二等公民这样的网络应用程序，这就是我在我的制作应用程序中使用的内容：

CSS：

// Android (or anything else, which I'm not really concerned about)
// Simply use CSS! Android has built in delay to prevent trigger on scroll
body:not(.ios) { // Adding a body class using Rails 'browser' gem
  .list a:active {
    background-color: #f5f5f5;
  }
}

// iOS only. :active would trigger on scroll (Apple treats web apps like 2nd class citizens)
body.ios {
  .list a.touch {
    background-color: #f5f5f5;
  }
}

JavaScript / jQuery：

// iOS only
// Roll our own delay so background color doesn't trigger on scroll
if(navigator.userAgent.match(/(iPad|iPhone)/g) != null) {  

  var addTouch;
  $('.list a').on('touchend', function() {
    $(this).removeClass('touch');
    clearTimeout(addTouch);
  }).on('touchmove', function() {
    $(this).removeClass('touch');
    clearTimeout(addTouch);
  }).on('touchstart', function() {
    var that = $(this);
    addTouch = setTimeout(function() {
      that.addClass('touch');
    }, 40);
  });
}

让我用这句话来完成这个解决方案：这绝对是荒谬的。 Apple - 感谢您删除350ms触摸延迟：太棒了！但是，请修复CSS：激活，这样可以滚动，就像谷歌一样。

移动网络点按背景颜色？

1 个答案: