如何解決在使用事件代理時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或iOS版本的iPad Safari上運行。

我試過Apple's docs列出的所有事件，並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 *")來恢復它們，這可能是低效的。或者如果有更好的方法來解決這個問題。

順便提一下，這是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上用你的小提琴進行了測試，似乎不再有任何閃爍。