如何在使用事件委托时解决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上运行.

我尝试了Apple的文档中列出的所有事件,并且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>,或可能绑定了事件处理程序的任何元素.所以这可能不是一个好的解决方案.有没有一种好方法可以解决这种灰色或闪烁问题？

---

更新:查理在下面的答案运作良好,但也有一个问题:一旦我们设置了容器的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 *")来恢复它们,这可能是低效的.或者,如果有更好的方法来处理这个问题.

顺便说一句,这是webkit CSS样式的文档.我试图寻找一种类似的风格,这种风格不是由后代继承的,但似乎没有.

更新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:如何在链接被点击时禁用快速闪烁效果

如果是这样,请使用此CSS规则:

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

我在模拟器中用你的小提琴在iOS 6.1上进行了测试,似乎不再有任何闪烁.