移动网络点击背景颜色？答案

【问题标题】：Mobile Web tap background color?移动网络点击背景颜色？
【发布时间】：2016-07-13 12:00:04
【问题描述】：

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

CSS :active 在 Android 上效果很好。

在 iOS 9.3 中，苹果取消了 350 毫秒的点击延迟，我非常高兴地发现！我兴奋地删除了 fastclick.js。但是，当用户点击时， :active 似乎不起作用！他们的开发者论坛就是个笑话。没人在乎。

我尝试再次添加 fastclick.js，这使得 :active 在 iOS 上再次工作 - 但随后它在滚动时触发。

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

我认为这个 CSS 是为此目的而设计的：

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

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

更新：我在下面推出了自己的解决方案。希望这对使用网络应用程序的人有所帮助。

【问题讨论】：

标签： javascript html css mobile webkit

【解决方案1】：

首先，据我所知， :active 在 chrome for android 上运行良好。他们似乎在操作系统级别实现了延迟。

第二：正如我上面所说，我尝试为 iOS 添加 fastclick.js 以获取 :active 甚至可以正常工作。添加后，我至少能够 :active 工作 - 但它会在尝试滚动时激活。

因此，由于 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 - 感谢您消除 350 毫秒的触摸延迟：太棒了！但是，请修复 CSS :active 以便可以滚动，就像 Google 所做的那样。

【讨论】：