ontouchstart onclick 和 eventlistener 在移动设备上不起作用，但可以播放悬停动画

Question

我再次问这个问题，因为我尝试了上一篇文章中的所有答案，但没有任何效果，而且我也改变了一些。

我一直在开发一个网站，我使用 onclick 打开导航，但是当我在移动设备上尝试它时，它不起作用，它只是执行了 :hover 动画。然后我将 ontouchstart 添加到 div 中，但它仍然无法在移动设备上工作。然后我加了一个事件监听器，还是不行。当我点击它时，它就像我将鼠标悬停在它上面一样。我看过几篇关于为什么它可能不起作用的文章，但我不明白。此外，任何使用 onclick 的元素都不适用于移动设备。此外，js 是一个单独的文件（不确定这是否会由于某种原因影响它）。

<div id="navWrap" onclick="openNav()" ontouchstart="openNav()">
        <div class="navLine"></div>
        <div class="navLine" id="navMid"></div>
        <div class="navLine" id="navBottom"></div>
</div>

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

}

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

我还将所有按钮的 z-index 更改为 999，但仍然没有修复

该网站已上线，我可以提供网址，但我很犹豫，因为我不想显得我在宣传它。如果您需要，我很乐意提供。

Answer 1

您的 window.addEventListener 函数缺少闭包。

改变

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

}

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

到

window.addEventListener('load', function(){
    document.getElementById('navWrap').addEventListener('touchstart', openNav());

});

function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

Answer 2

您正在调用函数“openNav()”。您只需将您的函数作为回调传递

window.addEventListener('load', function() {
    document.getElementById('navWrap').addEventListener('touchstart', openNav); // openNav() -> openNav
}

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}