点击事件仅在移动设备上第二次有效，但在桌面上正常答案

【问题标题】：Click event only works second time on mobile, but fine on desktop点击事件仅在移动设备上第二次有效，但在桌面上正常
【发布时间】：2017-01-31 23:53:31
【问题描述】：

我对此进行了研究并尝试了添加e.preventDefault() 和return false 之类的方法，但没有运气。下拉效果仅在第二次点击时发生，尽管它在第一次点击桌面时发生。

$('.menu-item-has-children').click(function(e) {
        if ( $(this).hasClass('menu-item-slide-in') ) {
            $('.submenu-expand').removeClass('submenu-expand');
            $('> .sub-menu', this).addClass('submenu-expand');
        }
    });

它基本上只是一个移动导航菜单。当您单击包含子项的链接时，它们会展开，而任何其他展开的菜单都会折叠。

这是一个带有 li 的 HTML 示例，它具有 menu-item-slide-in 类。它取自 WordPress 导航。

<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-114 menu-item-slide-in" aria-haspopup="true"><span class="fa fa-chevron-down main-links-color" aria-hidden="true"></span><a href="#">Company</a>

<ul class="sub-menu">
    <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/jbec/history/">History</a></li>

【问题讨论】：

一个问题 - 与您的问题无关，但为什么有一个 .menu-item-has-children 的选择器，然后只有在它也有一个 .menu-item-slide-in 的类的情况下，您才可以做一些事情。为什么不将您的初始选择器更改为 .menu-item-has-children.menu-item-slide-in？
@Pete 太棒了
点击和点击是不同的野兽。你有任何:hover 的事情吗？如果是这样，移动浏览器可能会决定先显示这些，然后在第二次尝试激活 click 事件。
@Pete 我现在记得原因了。菜单项只动态获取menu-item-slide-in类，所以我的代码没有及时捕捉到。

标签： javascript jquery html css

【解决方案1】：

在监听 click 事件的同时，还要监听 touchend 事件。 click 事件可能不像你想象的那样在触摸屏上起作用。在 iO 上，必须在触发 click 事件之前发生超时，而在 Android 上，有时根本不使用 click 事件来指示点击。监听 touchend 事件将解决您的问题。

【讨论】：