jquery - .click 事件不会在 iOS 上的 Chrome 中触发

Question

当用户点击移动设备上的菜单栏时，我使用以下代码在我的网站上显示下拉菜单。

$('#mobile-menu').click(function() {
    $('nav').toggleClass('open');
    $('#mobile-menu').toggleClass('open');
});

它在桌面浏览器和 iOS 上的 Safari 中运行良好，但在 iOS 上的 Chrome 中它什么也不做。

奇怪的是，如果我点击 Chrome 中的选项图标并请求桌面版本，那么网站看起来完全一样，但菜单栏现在可以使用了。

知道这是为什么吗？

Answer 1

对于遇到此问题的任何其他人 - iOS Chrome 在触发 .click 事件之前会检查两件事之一。您可以选择其中之一，或者如果您比较偏执，也可以选择两者。

1. 该元素必须具有 CSS 属性:cursor:pointer; 或者，
   • 编辑:需要注意一个有趣的怪癖:如果您的 cursors:pointer; 规则仅在媒体查询中，iOS Chrome 将不会触发点击事件任何一个。在这种情况下，只需确保您有一个包含 cursor:pointer; 的元素的 CSS 规则在媒体查询之外，或者查看下面的第二个选项。
2. 该元素需要一个 onclick="" 属性。
   • 旁注: onclick 属性可以为空(假设您想在自己的 .js 文件中定位/处理事件), 只要它在那里。参见示例 2。

---

示例 1 - CSS

这是迄今为止解决问题的最简洁/最好的方法。确保您的 CSS 包含以下内容:

#mobile-menu {
    cursor: pointer;
}

---

示例 2 - HTML 属性

虽然不如 CSS 解决方案那么好，但在我不得不使用它的几次中，它还没有失败。

确保您的 HTML 标记包含这样的 onclick 属性:

<div id="mobile-menu" onclick=""> ... </div>