在iOS的Chrome浏览器中，.click事件无法触发。

Question

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

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

在桌面浏览器和iOS上的Safari中，它运行良好，但在iOS上的Chrome中却没有反应。

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

有什么想法吗？

- ollybowman

Answer 1

对于遇到此问题的其他人 - iOS Chrome 在触发 .click 事件之前会检查两种情况之一。你可以选择其中任何一种，或者如果你很谨慎，也可以同时采用两种。

1. 该元素必须具有 CSS 属性：cursor:pointer; 或者，
   • 编辑：需要注意的一个有趣的问题是，如果你的 cursors:pointer; 规则仅在媒体查询中，iOS Chrome 也不会触发点击事件。在这种情况下，请确保该元素的 CSS 规则包含在媒体查询之外，其中包括 cursor:pointer;，或者选择下面的第二个选项。
2. 该元素需要一个 onclick="" 属性。
   • 侧注： onclick 属性可以为空（假设您想在自己的 .js 文件内定位/处理事件），只要存在即可。见 示例2。

---

示例1 - CSS

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

#mobile-menu {
    cursor: pointer;
}

---

例子2 - HTML属性

虽然不如CSS方案美观，但我在使用它的几次尝试中都没有失败。

确保你的HTML标记包含onclick属性，像这样：

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

- Frits

Answer 2

尝试使用tap事件而不是click事件。这可能会起作用。

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

- Jitendra Sonvane

---

谢谢，看起来可以工作，尽管需要加载jquery mobile，你认为有没有不用它的方法。 - ollybowman