在 div 外部单击无法关闭 iphone 中的切换栏菜单答案

【问题标题】：Clicking on outside the div unable to close the toggle bar menu in iphone在 div 外部单击无法关闭 iphone 中的切换栏菜单
【发布时间】：2019-05-25 04:29:57
【问题描述】：

在移动设备上单击 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>

【问题讨论】：

可能在这里回答：stackoverflow.com/a/39245545/4378314

标签： javascript jquery html css

【解决方案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);

【讨论】：

我在 body 标签中添加了 cusrsor: 指针但没有得到这个 document.addEventListener('touchend', function(e){ // 你的事件主体在这里 }, false);
点击链接不工作其显示#标签
在活动结束时添加event.preventDefault()
如果我点击，切换栏现在不会打开
你能把你的代码贴在像jsfiddle这样的地方，这样我就可以检查问题了。

【解决方案2】：

body 的 Click 事件在 Safari 可触摸设备上不起作用。我为 react.Js 的下拉菜单修复了这个问题。让我们看看，

componentDidMount(){
                document.body.style.cursor = 'pointer';
        },
        componentWillUnmount(){
            document.body.style.cursor = 'default';
        }
    })

【讨论】：