window.addEventListener代码不工作在移动

时间:2019-02-01 17:43:53

标签: javascript jquery css3 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>

最诚挚的问候

1 个答案:

答案 0 :(得分: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) { ... }