ontouchstart onclick 和 eventlistener 不能在移動設備上工作，但可以播放 hover animation

Question

我再次問這個問題，因為我嘗試了我之前帖子中的所有答案，但沒有一個有效，我也做了一些改變。

我一直在網站上工作，我使用 onclick 打開導航，但是當我在移動設備上嘗試它時它不起作用，它只是做了：hover animation。 然后我將 ontouchstart 添加到 div 中，但它仍然無法在移動設備上運行。 然后我添加了一個事件監聽器，它仍然沒有工作。 當我點擊它時，它就像我在它上面的 hover 一樣。 我看過一些關於為什么它可能不起作用的文章，但我無法弄清楚。 此外，任何使用 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，但仍然沒有修復

該網站是實時的，我可以提供 url 但我很猶豫，因為我不想看起來像是在宣傳它。 如果你需要它，我很樂意提供。

Answer 1

您在 window.addEventListener function 上缺少一個閉包。

改變

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