javascript - 移动网络点击背景颜色？

Question

我想在我的 Web 应用程序上实现点击背景颜色效果，就像 native 应用程序那样(例如 iOS 的 gmail - 当您点击点击进入电子邮件时，背景以蓝色突出显示)。

CSS :active 在 Android 上运行良好。

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

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

native 可能有 50 毫秒的延迟，因此它仅在点击链接时突出​​显示。

我认为这个 CSS 就是为了这个目的而设计的:

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

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

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

Answer 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 - 感谢您移除 3​​50 毫秒的触摸延迟:太棒了!但是，请修复 CSS :active 以便可以滚动，就像 Google 所做的那样。