window.onclick 会在我单击按钮时立即触发

Question

我有一个下拉按钮，但是当我单击它时，窗口 onclick 会触发关闭下拉列表。 如果我删除 windows 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

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

单击按钮时，事件会冒泡到其父级，直到它到达 window 对象。 您需要通过对事件调用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>

Answer 2

这是因为事件正在冒泡。 - https://javascript.info/bubbling-and-capturing通过单击您触发的按钮：

1. 我的函数（）
2. 触发 window.onclick 监听器

Answer 3

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

Event.stopPropagation()