window.onclick fires as soon as I click button

Question

I have a button for a dropdown but when I click it the window onclick fires which closes the dropdown. If I remove the windows onclick it works fine using just the button

<div class="userbtn-wrapper">
enter code here`<button  onclick="myFunction()" id="userbtnid" class="userbtn userbtn-bb"><img src="./images/user.png" class="userico-small"><span class=userbtn-text>mxadam</span><span class="userbtn-ico"><i class="fa fa-angle-down"></i></span></button>
<div id="userbtn-contentid" class="userbtn-content">

  </div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("userbtn-contentid").classList.toggle("show");
  document.getElementById("userbtnid").classList.toggle("active");
 }

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

var userbtn = document.getElementsByClassName("userbtn");
var i;
for (i = 0; i < userbtn.length; i++) {
  var userbtn = userbtn[i];
  if (userbtn.classList.contains('active')) {
   userbtn.classList.remove('active');
  }
}

  }
}
</script>

Answer 1

The issue is due to event bubbling or propagation.

When the button is clicked, the event bubbles to its parent til it reaches the window object. You need to stop the event propagation by calling the stopPropagation function on the event.

Here are a few steps to resolve the issue:

1. Pass the event object as an argument on click function
2. Accept the event as a parameter and call stopPropagation on that event
3. Verify the changes by commenting the stopPropagation line.

Changes can be verified by outputting the info in console.

 function myFunction(event) { // pass the event event.stopPropagation(); // stop event bubbling console.log('button event called'); document.getElementById("userbtn-contentid").classList.toggle("show"); document.getElementById("userbtnid").classList.toggle("active"); } window.onclick = function(event) { console.log('window called'); if (!event.target.matches('.userbtn userbtn-bb active')) { var dropdowns = document.getElementsByClassName("userbtn-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="userbtn-wrapper"> enter code here <button onclick="myFunction(event)" id="userbtnid" class="userbtn userbtn-bb"><img src="./images/user.png" class="userico-small"><span class=userbtn-text>mxadam</span><span class="userbtn-ico"><i class="fa fa-angle-down"></i></span></button> <div id="userbtn-contentid" class="userbtn-content"> </div>

Answer 2

This is due to the fact that event is bubbling. - https://javascript.info/bubbling-and-capturing By clicking the button you are triggering:

1. myFunction()
2. Triggering window.onclick listener

Answer 3

function myFunction(event) {
    event.stopPropagation();
    document.getElementById("userbtn-contentid").classList.toggle("show");
    document.getElementById("userbtnid").classList.toggle("active");
}

Event.stopPropagation()