移动菜单中的链接（<ul> <li a>）在使用 'touchend' 而不是 JavaScript 中的 'click' 事件时不起作用

Question

我是这个领域的新手。我设计了一个简单的网站并使用 javascript 在类之间切换以在移动视图上显示和隐藏菜单。但是，有一些问题。第一个问题是在 Safari 浏览器或 iPhone、iPad 等中打开网站时，汉堡包按钮没有响应。然后经过一些研究，我发现如果我将addListener中的'click'替换为'touchend'，它就可以工作。我做到了，是的，菜单按预期打开和关闭，但里面的链接不起作用。菜单是一种简单的 Home 之类的东西。请帮我。这非常重要，因为该网站目前正在运行并且没有从潜在客户那里获得任何流量。

Class“汉堡”是汉堡菜单。 div“l1”是菜单图像。

CSS:
#l1{
top: 0; 
width: 40px;
height: 5px;
background-color:#018392;
text-align: center;
margin: 8px;
}

HTML
<div id="burger" class="burger">
     <div id="l1"></div>
</div>
<nav>
     <ul>
     <li><a href="#">HOME</a></li>
     <li><a href="#g">GALLERY</a></li>
     <li><a href="#abt-us">ABOUT</a></li>
    </ul>
</nav>

JAVASCRIPT
<script>
         window.addEventListener('touchend',function(event){
             var bur=document.getElementById("burger");
             var menu=document.querySelector('ul');
             var l1=document.getElementById("l1");
                 if((event.target==bur)||(event.target==l1)){
                     menu.classList.toggle("active");
                 }                
                 else {
                     menu.classList.remove("active");
                 }
                 
         });
 </script>

Answer 1

“Safari Mobile 7.0+（可能还有更早的版本）存在一个错误，即不会在通常不具有交互性（例如）且也没有直接附加事件侦听器的元素上触发点击事件元素本身”参见：https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile

因此，请将您的 <div id="burger" class="burger"> 替换为互动元素，例如<button id="burger" class="burger"></button>

移动菜单中的链接（<ul> <li a>）在使用 'touchend' 而不是 JavaScript 中的 'click' 事件时不起作用

Links in mobile menu (<ul> <li a>) doesn't work when used 'touchend' instead of 'click' event in JavaScript

javascript

css

safari

click