.click事件未在iOS上的Chrome中触发 [英] .click event not firing in Chrome on iOS

问题描述

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

I'm using the following code to show a drop down menu on my site when a user clicks on the menu bar on a mobile device.

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

它在桌面浏览器和iOS上的Safari中都可以正常运行，但在iOS上的Chrome中什么也没做.

It works fine on the desktop browsers, and in Safari on iOS, but in Chrome on iOS it does nothing.

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

The weird thing is if that I click on the options icon in Chrome and request the desktop version then the site looks exactly the same but the menu bar now works.

有什么想法吗?

推荐答案

对于遇到此问题的其他任何人-iOS Chrome浏览器会在触发 .click 事件之前检查以下两项内容之一.您可以选择其中之一，也可以选择两者.

For anyone else running into this issue - iOS Chrome checks for one of two things before firing the .click event. You can choose either of these, or if you are paranoid, you can also opt for both.

1. 该元素必须具有CSS属性: cursor:pointer; 或，
   • 一个值得注意的怪癖:如果您的 cursors:pointer; 规则仅在媒体查询中，则iOS Chrome不会触发click事件任何一个.在这种情况下，只需确保该元素的CSS规则在媒体查询之外包含 cursor:pointer; 即可，或者可以选择下面的第二个选项.

1. The element must have the CSS property: cursor:pointer; or,
   • an interesting quirk to be aware of: if your cursors:pointer; rule is only inside a media query, iOS Chrome won't trigger the click event either. Just make sure that you have a CSS Rule for that element that includes cursor:pointer; outside of the media query in this case, or alternatively, look at the second option below.

• 侧注: onclick 属性可以为空白(假设您要在自己的 .js 文件中定位/处理事件)，只要它在那里.参见示例2.

• Side Note: the onclick attribute can be blank (assuming you want to target/work with the event inside your own .js file), as long as it's there. See Example 2.

---

示例1-CSS

到目前为止，这是解决问题的最简洁/最巧妙的方法.确保您的CSS包含以下内容:

---

Example 1 - CSS

This is by far the neatest/nicest way to fix the problem. Make sure your CSS contains the following:

#mobile-menu {
    cursor: pointer;
}

---

示例2-HTML属性

虽然不如CSS解决方案好，但在我不得不使用它的情况下，这仍然没有失败.

---

Example 2 - HTML Attribute

Whilst not as nice as the CSS solution, this has yet to fail the few times I've had to use it.

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

Make sure your HTML markup contains the onclick attribute like this:

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

这篇关于.click事件未在iOS上的Chrome中触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！