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