.click事件未在iOS上的Chrome中触发

Question

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

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

它可以在桌面浏览器和iOS上的Safari中正常工作，但在iOS上的Chrome中却无效。

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

为什么会这样？

Answer 1

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

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>

Answer 2

尝试使用点击事件而不是点击事件。它可能有用

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