window.addEventListener 代码在移动设备上不起作用

Posted 2023-05-08

【中文标题】window.addEventListener 代码在移动设备上不起作用

【英文标题】：window.addEventListener code is not working on mobile

【发布时间】：2019-06-26 07:58:18

【问题描述】：

请在我的 JS 代码中遇到问题我构建了此代码，因为我希望当访问者单击另一个 div（不是菜单）时，如果菜单打开，菜单将关闭 这是代码，但此代码不能在手机上运行，​​但它可以在 chrome 或 firefox 上的开发人员工具中运行

<script>
window.addEventListener('mouseup', function(event)
    var box = document.getElementById('narvbar_menu');
    if (event.target != box && event.target.parentNode != box)
        box.style.display="none";
        document.getElementById("close_menu").style.display="none";
    
);
</script>

最好的问候

【问题讨论】：

您是否尝试过使用“点击”事件而不是“鼠标”？

developer.mozilla.org/en-US/docs/Web/API/Touch_events/…

【参考方案1】：

这是因为"mouseup" 不会在移动设备上触发。也听听"touchend":

编辑： 以下代码应将"mouseup" 和"touchend" 的事件侦听器附加到窗口。

<script>
    ["mouseup", "touchend"].forEach(function(e) 
        window.addEventListener(e, function(event)
            var box = document.getElementById('narvbar_menu');
            if (event.target != box && event.target.parentNode != box)
                box.style.display="none";
                document.getElementById("close_menu").style.display="none";
            
        );
    )
</script>

如果您不想监听多个事件，"click" 应该适用于移动设备和桌面：

window.addEventListener("click", function(event)  ... 

【讨论】：

只是一个挑剔，在原生 JS 中，带有 type 参数，你只能附加一个事件类型。

我已经编辑了我的解决方案，它现在应该可以工作了，感谢@Teemu 指出事件侦听器一次只能接受一个事件。