Question

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

所以，如果父母或祖父母是300 x 300像素，并且链接只是一个单词，比如60 x 20像素，那么当用户触摸父母内部的任何地方（链接除外）时，整个300 x 300区域将灰显或闪烁，具体取决于iOS版本。

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

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

这是解决灰色或闪烁问题的正确方法吗？还有其他方法吗？此方法存在一个问题，即在此区域内可能存在动态内容，例如链接，按钮，复选框，无线电，选择或任何其他可能具有事件处理程序的<div>，因此我可以' t在每个不可预测的元素上设置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 *")来恢复它们，这可能是低效的。或者，如果有更好的方法来解决这个问题。

顺便说一下，这是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上的小提琴进行了测试，似乎不再有任何闪烁。

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

1 个答案: