点击事件未在 iOS 上触发答案

【问题标题】：Click events not firing on iOS点击事件未在 iOS 上触发
【发布时间】：2014-08-15 20:28:33
【问题描述】：

我有一个包含嵌套列表的列表，我想在单击它们时打开它们。它在桌面和各种浏览器上都可以正常工作，但是当我使用 iOS 时，无论是 iPad 还是 iPhone，它都不想工作。

列表如下所示：

<ul class="lessonList">
   <li class="lessonItem" id="1"><input type="checkbox" class="scopeCheck">Default Scope
      <ul style="display:none;" class="scope1">...other content in here</ul>
   </li> 
</ul>

和这样的代码：

$(document).on("click",".lessonItem",function(e){
    e.stopImmediatePropagation();
         $(this).children("ul").slideToggle();

});

我有一个 stop immediateprop 来停止单击复选框以激活滑动切换，但是在 iOS 上，它甚至不会下降，直到（且仅当）您选中该复选框。在 iOS 设备中单击 li 本身不会执行任何操作。

【问题讨论】：

标签： jquery html ios

【解决方案1】：

如果您将此样式添加到 <li> 元素，它会起作用：

li { cursor: pointer; }

JSFIDDLE DEMO

这似乎是 iOS 事件的一个错误 - reference。

【讨论】：

哇，多么奇怪的修复。知道为什么会这样吗？

【解决方案2】：

我也遇到了这个问题，CSS 光标技巧对我不起作用。

幸运的是，在玩了一些之后，我发现点击事件总是传输到锚标签，并且能够通过将我的 Div 容器更改为锚标签来解决我的问题。

【讨论】：

谢谢，这对我有用。我还发现绑定到“touchstart”和“click”对我有用。

【解决方案3】：

这发生在非常特殊的条件下：

为可点击的元素设置 :hover 规则。该规则中的样式无关紧要，该规则甚至可以为空。
有一个 CSS3 相邻兄弟规则，其中包含一个最具体的术语，该术语与 DOM 中的至少一个元素匹配。它不需要匹配整个规则。同样，规则甚至可以为空。
可点击元素后跟一个元素（也可以作为第一个元素包裹在元素内）。

您有一个可点击元素的 :hover 规则。该规则中的样式无关紧要，该规则甚至可以为空。并且您有一个 CSS3 相邻兄弟规则，其最具体的术语与 DOM 中的至少一个元素匹配。它不需要匹配整个规则。同样，规则甚至可以为空。并且可点击元素后跟一个元素（也可以作为元素内的第一个元素包装）。在这种情况下，点击可点击元素（无论该点击是 JavaScript onclick 处理程序，还是只是一个简单的）不会注册。相反，它应用 :hover 样式，并且只有在第二次点击时它才会导航或运行 JavaScript。这只发生在 Mobile Safari 上几乎所有的改变都会使 bug 消失，所以所有这些都是有效的解决方法：

在检查我们的代码后，所有这些条件都适用于我们，但删除这些条件也是不切实际的。

【讨论】：

这是我的情况，但我很困惑我应该如何修复这个错误。