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;} 

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