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

当使用事件委托方法时，我们在更高级别的元素（父级或祖父级）上设置事件处理程序，但这在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/

这是解决灰色或闪烁问题的正确方法吗？ 还有别的办法吗？ 此方法存在一个问题，即在此区域内可能存在动态内容，例如链接，按钮，复选框，无线电，选择或具有事件处理程序的任何其他可能的

，因此我无法设置每个不可预测元素上的touchstart处理程序。 我或许可以使用类似的东西：

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

在http://jsfiddle.net/2K3TB/35/但是我必须检查所有 ， ， ， 或任何可能绑定了事件处理程序的元素它。 所以这可能不是一个好的解决方案。 有没有一种好方法可以解决这种灰色或闪烁问题？

---

更新： Charlie在下面的回答运作良好，但也有一个问题：一旦我们设置了容器的css样式， 或任何其他可点击的元素也inheritance了样式，并且也变得透明。 所以我不得不这样做：

 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); 

也就是说，我必须首先保存水龙头高亮颜色，然后设置容器使其透明，然后将下面的颜色设置为使用该颜色。 它适用于 ，我想知道其他元素是什么，以及我是否应该使用$("#the-container *")来代替它们，这可能是低效的。 或者，如果有更好的方法来处理这个问题。

顺便说一下，这是webkit CSS样式的文档 。 我试图寻找一种类似的风格，这种风格不是由后代inheritance的，但似乎没有。

更新2：似乎如果我们只是将孩子们设置回那种风格，那么它就会很好，因为我们只会降低一级，并让后代inheritance它们：

 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上的小提琴测试了它，似乎不再有任何闪烁。