iOS上无法触发点击事件

Question

我有一个包含嵌套列表的列表，我想在单击它们时打开它们。在桌面和各种浏览器上运行良好，但当我使用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本身则无效。

- ajmajmajma

Answer 1

如果您将此样式添加到 <li> 元素中，它就会生效：

li { cursor: pointer; }

JSFIDDLE演示

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

- JRulle

---

哇，这是一个奇怪的修复。你有什么想法为什么它会这样工作吗？ - ajmajmajma

iOS存在一个奇怪的问题，即当被点击的元素实际上是链接时，点击事件只委托给父元素。例如，这可以是一个a元素。然而，由于某种原因，iOS还会计算具有cursor: pointer;属性的元素。另一个解决方法是将onclick="none()"添加到您的元素中。更多信息请参见：https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - Stan Derksen

Answer 2

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

幸运的是，在一些尝试后，我发现点击事件总是传递给锚点标签，并且通过将我的Div容器更改为锚点标签，我能够解决我的问题。

- Mad-Chemist

---

谢谢，这对我很有用。我还发现绑定到“touchstart”和“click”也适用于我。 - btraas

你好！光标技巧对我也不起作用。你能帮我检查一下我的代码吗？https://stackoverflow.com/questions/76309543/how-to-fix-event-listener-on-ios - Rocky Barua

Answer 3

这种情况只会在特定条件下发生：

• 对可点击元素设置:hover规则。该规则的样式不重要，甚至可以为空。
• 使用CSS3相邻兄弟选择器，并且其中最具体的术语匹配DOM中至少一个元素。它不需要完全匹配整个规则。同样地，该规则也可以为空。
• 可点击元素后面紧跟着一个<a>元素（该元素也可以作为第一个元素包裹在<p>元素内）。

如果您对可点击元素设置了:hover规则。该规则的样式不重要，甚至可以为空。 并且您使用了CSS3相邻兄弟选择器，并且其中最具体的术语匹配DOM中至少一个元素。它不需要完全匹配整个规则。同样地，该规则也可以为空。 并且可点击元素后面紧跟着一个<a>元素（该元素也可以作为第一个元素包裹在<p>元素内）。 在这种情况下，点击可点击元素（无论是JavaScript onclick处理程序还是简单的<a>）都不会被注册。相反，它会应用:hover样式，只有在第二次点击时才会导航或运行JavaScript。这只会在Mobile Safari上发生。几乎任何更改都会使该错误消失，因此以下所有方法都是有效的解决方法：

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

- Yogi

---

这是我的情况，但我很困惑应该如何修复这个 bug。 - Rafael Perozin