使用事件委托时如何解决 iPad 上的闪烁问题？

Question

当使用事件委托的方法时，我们将事件处理程序设置在更高级别的元素（父或祖父）上，但这在 iPad 的 Safari 上存在问题：如果父元素有点击处理程序，当用户触摸任何东西时在此元素内，整个区域将变灰（在 iOS 5.1 上）或闪烁（在 iOS 6 上）。

因此，如果父级或祖父级是 300 x 300 像素，而链接只是一个单词，例如 60 x 20 像素，那么当用户触摸父级内部的任何位置（链接除外）时，整个 300 x 300 区域会变灰或闪烁，具体取决于 iOS 版本。

这是一个例子：http://jsfiddle.net/2K3TB/30/ 它可以在物理设备或 iOS 模拟器上运行带有 iOS 5.1 或 6 的 iPad Safari。

我尝试了Apple's docs上列出的所有事件，touchstart可以被监听，事件处理程序可以执行preventDefault()，这样就不会出现灰显或闪烁。示例：http://jsfiddle.net/2K3TB/31/ 但是现在，将在文档顶部添加“ha”的链接不起作用。为了使它工作，我必须在链接上设置一个touchstart 处理程序才能使链接工作：http://jsfiddle.net/2K3TB/33/

这是解决灰显或闪烁问题的正确方法吗？还有其他方法吗？这个方法有一个问题，在这个区域内，可能有动态内容，例如链接、按钮、复选框、单选、选择或任何其他可能有事件处理程序的<div>，所以我无法设置每个不可预测元素上的 touchstart 处理程序。我也许可以使用类似的东西：

$("#container").on("touchstart", function(ev) {
    if (ev.target.tagName.toLowerCase() !== "a") {
        ev.preventDefault();
    }
});

就像在http://jsfiddle.net/2K3TB/35/ 中一样，但是我必须检查所有<a>、<input>、<button>、<select> 或任何可能绑定了事件处理程序的元素。所以这可能不是一个好的解决方案。有什么好的方法可以解决这个灰显或闪烁的问题吗？

---

更新： Charlie 在下面的回答效果很好，但也有一个问题：一旦我们设置了容器的 css 样式，<a> 或任何其他可点击元素也继承自该样式，也变得透明。所以我不得不这样做：

var tapHighlightColorStyle = $("#the-container").css("-webkit-tap-highlight-color");
$("#the-container").css("-webkit-tap-highlight-color", "transparent");
$("#the-container a").css("-webkit-tap-highlight-color", tapHighlightColorStyle);

也就是说，我必须先保存点击高亮颜色，然后将容器设置为透明，然后将下面的<a>设置回使用该颜色。它适用于<a>，我想知道其他元素呢，以及我是否应该使用$("#the-container *") 来恢复它们，这可能效率低下。或者如果有更好的方法来解决这个问题。

顺便说一下，这是docs for the webkit CSS style。我试图寻找一种不会被后代继承但似乎没有的类似风格。

更新 2： 看来如果我们只是将孩子设置回那个样式，那么就可以了，因为我们只向下一层，让后代从他们那里继承：

var tapHighlightColorStyle = $("#the-container").css("-webkit-tap-highlight-color");
$("#the-container").css("-webkit-tap-highlight-color", "transparent");
$("#the-container").children().css("-webkit-tap-highlight-color", tapHighlightColorStyle);

Answer 1

这与您遇到的问题类型相同吗：iPad Safari: How to disable the quick blinking effect when a link has been hit

如果是这样，请使用此 CSS 规则：

*{
    -webkit-tap-highlight-color:transparent;
}

我在模拟器中用你的小提琴在iOS 6.1上测试过，好像没有闪烁了。