点击事件未在 iOS 上触发

Posted 2023-03-14

【中文标题】点击事件未在 iOS 上触发

【英文标题】：Click events not firing on 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 本身不会执行任何操作。

【参考方案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 消失，所以所有这些都是有效的解决方法：

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

【讨论】：

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