iOS 7懸停/點擊問題 - 在某些情況下沒有觸發點擊

Question

我有一種「小工具」 - 一種數據表，包含排序，行選擇等其他豐富功能。

在某些情況下（小部件在DOM中放置/嵌套），點擊它的行不會在iOS 7 Safari中觸發。

的Widget是使用jQuery 1.6.4

我不能發佈一個整體部件代碼（你真的wan't做到這一點;）），但我可以再現場景縮小到下面的案例：

一些行

1. 簡單的HTML表格，在每個
2. 第一列中有兩個的cols包含一個「複選框」 - 簡單div這通常是隱藏的，變得可見，然後父行得到徘徊。僅用CSS觸發可見性
3. 每行都有一個click事件處理程序。不管它做什麼。在我的例子則會觸發alert()
4. 表的父是具有固定高度的塊元件和overflow-y設置爲auto
5. 表是大於它的父，所以，一些表的內容被隱藏，並且可以與滾動
可以看出

這裏是一個的jsfiddle：http://jsfiddle.net/822eG/4/

在任何桌面瀏覽器項目成功徘徊，點擊觸發。在iOS7上懸停正在工作，但不會觸發點擊。

備註：在iOS上，您必須點擊兩次以觸發click。第一次點擊會觸發hover，您將看到一個「複選框」，然後第二次點擊必須觸發click，但它不會...

任何這些情況都需要重現問題。刪除一個，它開始工作...

如果您刪除「複選框」外觀 - 點擊將工作（http://jsfiddle.net/822eG/5/）。

如果您刪除了一個高度修正 - 它會起作用（http://jsfiddle.net/822eG/6/）。

如果您刪除溢出滾動 - 它將工作（http://jsfiddle.net/822eG/8/）。

任何解決方法是必要的，但功能應保持不變。所以，我無法刪除「複選框」，尺寸修復，懸停，點擊或溢出滾動。另外，更改HTML標記也不會發生。

注意我有一個解決方案 - 請參閱下面的答案。但是我仍然需要一個更好的解決方法來儘可能地繼續使用CSS。

地址：提起蘋果＃錯誤16072132

Answer 1

試試這個：使用此

.wrapper { 
    -webkit-overflow-scrolling: touch; 
} 

Answer 2

突然間，我已經有了一個解決方案...使用JavaScript我可以刪除:hover選擇，但仍然保持功能。

如果我將觸發複選框的可見性不是由CSS :hover，但通過類，並通過JavaScript設置它，它會工作。

http://jsfiddle.net/822eG/10/

Answer 3

..try：

$('.row').on('touchstart click', function(){ 
     alert('clicked'); 
}); 

Answer 4

我目前的工作方案要求在整個代碼庫中沒有任何更改，並在正常工作我們條件

1. 隨着MutationObserver，監測節點插入head
2. 如果新節點被插入，這是一個link，檢查document.styleSheets
3. 對於每個片檢查它的規則
4. 如果規則選擇器（由document.styleSheets[n].rules[i].selectorText訪問）包含:hover檢查風格這個選擇
5. 如果樣式包含none或visibility不同visibledisplay不同 - 這是一場「秀通過懸停」的風格
6. 爲電子商務ACH這種風格改變它的選擇 - 由.hover更換:hover，並聲明body委託其將切換.hover類觸發元素

完整的源代碼在這裏mouseenter和mouseleave事件：https://gist.github.com/Olegas/9143277

Answer 5

爲了讓iOS的忽視懸停狀態，請嘗試以下操作：

.wrapper 
{cursor: pointer;} 

您可以在任何元素上使用它來使其正常工作。