【问题标题】:window.addEventListener code is not working on mobilewindow.addEventListener 代码在移动设备上不起作用
【发布时间】: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>

最好的问候

【问题讨论】:

标签: javascript jquery css responsive-design menu


【解决方案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 指出事件侦听器一次只能接受一个事件。
猜你喜欢
  • 1970-01-01
  • 2022-01-12
  • 2014-04-22
  • 1970-01-01
  • 2017-07-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-31
相关资源
最近更新 更多