javascript - 单击按钮后 window.onclick 就会触发

Question

我有一个下拉菜单按钮，但是当我单击它时，窗口 onclick 会触发，从而关闭下拉菜单。如果我删除窗口 onclick，则仅使用按钮即可正常工作

<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

该问题是由于事件冒泡或传播造成的。

单击按钮时，事件将冒泡到其父级，直到到达窗口对象。您需要通过调用 stopPropagation 来停止事件传播事件上的函数。

以下是解决该问题的几个步骤:

1. 将事件对象作为点击函数的参数传递
2. 接受事件作为参数并对该事件调用 stopPropagation
3. 通过注释 stopPropagation 行来验证更改。

可以通过在控制台中输出信息来验证更改。

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>