javascript - 单击div外部无法关闭iphone中的切换栏菜单

Question

我编写了代码以在移动设备上单击 div 外部时关闭菜单。它适用于 Android 手机，但不适用于 IOS 设备。

如果我点击切换栏，下拉菜单将打开，如果我点击菜单或在菜单外，div 菜单应该关闭。对于 Android 在 IOS 设备中遇到问题，它工作正常。

这是我添加的 javascript 代码。

        window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
         var dropdowns = document.getElementsByClassName("dropdown-content");
         var i;
         for (i = 0; i < dropdowns.length; i++) {
         var openDropdown = dropdowns[i];
         if (openDropdown.classList.contains('show')) {
         openDropdown.classList.remove('show');
       }
       }
       }
       }


        <div class="container">
        <nav class="navbar menu-bar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
        <div class="navbar-header">      
        <button onclick="myFunction()" type="button" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
        </button>
        <a class="navbar-brand" href="#"><img src="images/Bezelsoft.png" class="img-responsive"></a>
          </div>
          <div class="collapse navbar-collapse dropdown-content" id="myNavbar" >    
     <ul class="nav navbar-nav navbar-right">
     <li class="active"><a href="index.html">HOME</a></li>
    <li><a href="service.html">TECHNOLOGY SERVICES</a></li>
    <li><a href="industries.html">INDUSTRIES</a></li>
    <li><a href="carporate.html">CORPORATE</a></li>
    <li><a href="resources.html">RESOURCES</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
  </ul>
</div>
</div>
</nav>
 </div>    

Answer 1

body 的点击事件不适用于基于 safari 的设备。您可以创建一个可点击区域并将其设为 cusrsor: pointer 或另一种解决方案是使用 touchevents。

document.addEventListener('touchend', function(e){
    // your event body here 
}, false);

在你的代码中，它应该是:

document.addEventListener('touchend', function (event) {
    if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
    event.preventDefault();
}, false);