iOS 7悬停/点击问题 - 在某些情况下没有触发点击

Question

我有一种“小部件” - 一个包含排序，行选择等丰富功能的数据表。

在某些情况下（在DOM中放置小部件/嵌套），在iOS 7 Safari中不会触发它的行。

Widget正在使用jQuery 1.6.4

我无法发布整个小部件代码（你真的不会发生这种情况;）），但我可以将复制方案缩小到以下情况：

1. 简单的html表，包含一些行，每个
两个列
2. 第一列包含一个“复选框” - 简单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。

ADD ：向Apple提交了一个错误＃16072132

Answer 1

试试这个：

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

Answer 2

突然间，我有了一个解决方案......使用JavaScript我可以删除:hover选择器，但仍保留功能。

如果我不是通过CSS :hover触发复选框可见性，而是通过类触发，并通过javascript设置它，它将起作用。

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

Answer 3

要让iOS忽略悬停状态，请尝试以下操作：

.wrapper 
{cursor: pointer;}

您可以在任何元素上使用它以使其按预期运行。

Answer 4

我当前的工作解决方案不需要对整个代码库进行任何更改，并且在我们的条件下正常工作

1. 使用MutationObserver，将节点插入head
2. 如果插入了新节点，且这是link，请选中document.styleSheets
3. 对于每张纸，检查它的规则
4. 如果规则选择器（document.styleSheets[n].rules[i].selectorText访问）包含此选择器的:hover检查样式
5. 如果样式包含与display不同的none或与visibility不同的visible - 这是“悬停式展示”样式
6. 对于每个此类样式更改它的选择器 - 将:hover替换为.hover并为body和mouseenter事件声明mouseleave代理，以便切换.hover 1}}触发元素上的类

此处的完整源代码：https://gist.github.com/Olegas/9143277

Answer 5

..试着用这个：

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