Clicking on outside the div unable to close the toggle bar menu in iphone

Question

I have written code to close menu when clicking on outside the div on mobile devices.It is working on Android phones but it is not working in IOS devices.

If i click on toggle bar dropdown menu will be opened and if i click on the menu or outside the menu div menu should be closed.It is working fine for Android getting problem in IOS devices.

This is the javascript code i have added.

        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>

Possibly answered here: https://stackoverflow.com/a/39245545/4378314 — Kalnode, Dec 27 '18 at 06:08

Wellwisher · Accepted Answer · 2018-12-27T07:16:33.840

1

Click event for the body will not work on safari based devices. you can create a clickable area and make it cusrsor: pointer or another solution is use touchevents.

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

In your code, it should be :

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);

edited Dec 27 '18 at 07:16

answered Dec 27 '18 at 06:30

Wellwisher

472
2
8

i have added cusrsor: pointer in body tag but not getting this document.addEventListener('touchend', function(e){ // your event body here }, false); – tester Dec 27 '18 at 06:40
clicking on the links it is not working its displaying # tag – tester Dec 27 '18 at 07:05
add `event.preventDefault()` at end of the event – Wellwisher Dec 27 '18 at 07:10
toggle bar is not opening now if i click – tester Dec 27 '18 at 07:20
can you post your code somewhere like jsfiddle so that I can check the problem. – Wellwisher Dec 27 '18 at 07:31
solved by adding jquery code for that jQuery(document).ready(function($) { $("#myNavbar").on("touchstart", function(event) { window.location.href = $(event.target).attr('href'); }); }); – tester Dec 27 '18 at 08:15

score 0 · Answer 2 · answered Jul 09 '20 at 08:43

Click event for the body will not work on safari touchable devices. I am fixed this issue for dropdown on react.Js. Let's see,

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

Nattaya Makerd · Answer 3 · 2022-11-25T05:27:54.993

How to Detect a Click Outside an Element https://www.w3docs.com/snippets/javascript/how-to-detect-a-click-outside-an-element.html

function dropLogin(id) {
  document.getElementById(id).classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
document.addEventListener("click", (evt) => {
  const parent = document.getElementById("menu");
  let targetParent = evt.target; // clicked element          
  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');
        }
     }
  }
});

.dropbtn {
  background:#b11971;
  color:#fff;
  padding: 0px 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  font-size:22px;
  opacity: 1;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #b11971;
}

.dropdown {
  float: right;
  position:absolute; top:20px; 
  right: 4%;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 250px;
  overflow: auto;
  box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
  right: 0;
  z-index: 1000;
  text-align:left;
  padding-bottom:15px;
  margin-top:10px;
}

.dropdown-content li {
  color: black;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover li{background-color: #f4f4f4;}
.show {display: block;}

<div id="menu" class="dropdown">
    <button onclick="dropLogin('login-dropdown')" class="dropbtn">☰</button>
    <div id="login-dropdown" class="dropdown-content">
       <a href="#"><li>menu 1</li></a>
       <a href="#"><li>menu 2</li></a>
       <a href="#"><li>menu 3</li></a>
   </div>
</div>

Clicking on outside the div unable to close the toggle bar menu in iphone

3 Answers3