jquery - 如何解决iPad使用事件委托(delegate)时的闪烁问题？

Question

当使用事件委托(delegate)方法时，我们在更高级别的元素(父元素或祖元素)上设置事件处理程序，但这在 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> ，或任何可能绑定(bind)了事件处理程序的元素。所以这可能不是一个好的解决方案。有没有好的方法来解决这个灰显或闪烁问题？

<小时/>

更新:下面查理的回答效果很好，但也有一个问题:一旦我们设置了容器的 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;
}

我在模拟器中用你的fiddle在iOS 6.1上测试了它，似乎不再有任何闪烁。