3

在使用事件委托的方法时，我们将事件处理程序设置在更高级别的元素（父或祖父）上，但这在 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 文档中列出的所有事件，并且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);
4

1 回答 1

10

这是您遇到的同一类型的问题吗：iPad Safari：如何在点击链接时禁用快速闪烁效果

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

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

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

于 2013-06-18T16:13:10.667 回答