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

我有一种“小部件”——一个数据表，具有排序、行选择等丰富的功能

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

小部件正在使用jQuery1.6.4

我不能发布完整的小部件代码（您真的不希望发生这种情况；），但我可以将复制场景缩小到以下情况：

简单的html表，包含一些行，每个行中有两个列

第一列包含一个“复选框”-simple

div

，该复选框通常隐藏并变为可见，然后父行被悬停。可见性仅通过CSS触发

每行都有一个

click

事件处理程序。不管它做什么。在我的示例中，它将触发一个

警报（）

表的父元素是一个具有固定高度的块元素，

overflow-y

设置为

auto

表比其父表大，所以有些表内容是隐藏的，可以通过滚动查看

下面是一个JSFIDLE：

在任何桌面浏览器项目成功悬停时，都会触发单击。在iOS7上，悬停正在工作，但未触发单击

注意：在iOS上，必须点击两次才能触发

单击

。第一次点击将触发

悬停

，您将看到一个“复选框”，然后第二次点击必须触发

点击

，但它不会

任何这些条件都是重现问题所必需的。删除一个，它就会开始工作

如果删除“复选框”外观，单击将起作用（）

如果删除高度固定-它将起作用（）

如果删除溢出滚动-它将起作用（）

需要任何变通方法，但功能应保持不变。所以，我不能删除“复选框”、大小修正、悬停、单击或溢出滚动。此外，更改HTML标记几乎不可能发生

注意我有一个解决方案-请参见下面我的答案。但我仍然需要一个更好的解决方法来尽可能多地使用CSS

---

添加：向苹果公司提交了一个bug#16072132

突然，我有了一个解决方案。。。使用JavaScript，我可以删除

：悬停
选择器，但仍保留功能

如果我不是通过CSS
：hover
而是通过类触发复选框可见性，并通过javascript进行设置，那么它就会工作

试试这个：

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

..试着用这个：

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

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

使用
MutationObserver
，监视节点插入
head
如果插入了新节点，并且这是一个
链接
，请选中
文档.样式表
检查每张表的规则
如果规则选择器（通过
文档.styleSheets[n].rules[i].selectorText访问）包含
：悬停
检查此选择器的样式

如果样式包含
显示
不同于
无
或
可见性
不同于
可见
-这是一种“悬停显示”样式
对于每一个这样的样式更改，它都是选择器-替换
：将
悬停在
上。悬停
并为
mouseenter
和
mouseleave
事件声明一个
主体
委托，这些事件将切换
。悬停
在触发的元素上

此处的完整源代码：
要使iOS忽略悬停状态，请尝试以下操作：

.wrapper 
{cursor: pointer;}

您可以在任何元素上使用此选项，使其按预期运行。
但是。。。如果我开始滚动。。。我会得到<代码> ToucStuts，不是吗？你的“全源”链接在函数中间的第97行中删去。在您以前的版本中似乎不是这样。除了定义光标悬停在
上时的外观外，这无法控制任何内容。wrapper
@JakeWilson您尝试过吗？我已经有过很多次这个问题，今天它仍然可以解决。