javascript - 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，但仍然没有修复

该网站已上线，我可以提供网址，但我很犹豫，因为我不想看起来像是在宣传它。如果你需要它，我很乐意提供。

标签： javascripthtmlcssonclickontouch

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%";
}