Tag: event delegation

如何在使用事件委托时解决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 = […]