带click事件的下拉菜单在触屏设备上需双击触发问题求助

问题根源 #

触屏设备里，浏览器会给click事件加300ms延迟来区分点击和双击；如果你的菜单项是<a>这类自带交互的元素，第一次触屏操作还可能被浏览器识别为「模拟hover」，第二次才会触发真正的click事件，最终导致双击才能展开菜单。

修复方案 #

方案1：同时绑定touchstart事件 #

在原有click事件基础上，添加touchstart监听，优先响应触屏操作，同时修复原代码的变量污染问题：

var MenuItem_WithChild = document.querySelectorAll("#menu .menu-item-has-children");

// 把函数提到循环外，避免重复创建
function subMenuOpen(e) {
    // 阻止默认行为和事件冒泡，避免浏览器干扰
    e.preventDefault();
    e.stopPropagation();
    
    // 用let声明i，避免闭包变量共享问题
    for (let i = 0; i < MenuItem_WithChild.length; i++) {
        MenuItem_WithChild[i].classList.remove("active");
    }
    this.classList.add("active");
}

for(let i=0; i< MenuItem_WithChild.length; i++){
    MenuItem_WithChild[i].addEventListener("touchstart", subMenuOpen);
    MenuItem_WithChild[i].addEventListener("click", subMenuOpen);
}

方案2：禁用触屏设备的hover模拟 #

如果菜单有hover样式，浏览器会把第一次触屏点击当成hover触发，可通过CSS媒体查询禁用触屏下的hover效果：

@media (hover: none) and (pointer: coarse) {
    #menu .menu-item-has-children:hover {
        pointer-events: none;
    }
    #menu .menu-item-has-children.active {
        pointer-events: auto;
    }
}

方案3：移除元素默认跳转行为（若为<a>标签） #

如果菜单项是<a>标签且不需要跳转功能，直接在事件处理中阻止默认行为：

// 在subMenuOpen函数开头添加
e.preventDefault();

内容的提问来源于stack exchange，提问作者Jason_C