javascript - window.addEventListener 代码不适用于移动设备

标签 javascript jquery css responsive-design menu

拜托,我的 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>

最好的问候

最佳答案

这是因为 "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) { ... }

关于javascript - window.addEventListener 代码不适用于移动设备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54484606/

相关文章:

Javascript 存储为 mongoDB 的变量逗号分隔字符串

javascript - json JSON 中出现意外标记 o

jquery - 在 Jquery 中单击另一个对象时为一个对象设置动画

jquery - 将数据库中的值显示到 HTML 输入标签中

javascript - 如何防止自定义光标移动字母?

html - 在 SVG 文件或标签内添加悬停样式

jquery - 修复屏幕中央的 iframe 弹出窗口

javascript - 使用 javascript 自动加载 href ="#"

javascript - 属性等于选择器在 Safari 5.1.7 中无法识别

javascript - 使用 jQuery 动画化元素