Javascript 单击该按钮后，window.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>

在此处输入代码`mxadm

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“userbtn contentid”）.classList.toggle（“show”）；
document.getElementById（“userbtnid”）.classList.toggle（“active”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.userbtn userbtn bb active'））{
var dropdowns=document.getElementsByClassName（“userbtn内容”）；
var i；
对于（i=0；i

这是因为事件正在冒泡。- 单击要触发的按钮：

myFunction（）

触发window.onclick侦听器

---

这是因为事件正在冒泡。- 单击要触发的按钮：

myFunction（）

触发window.onclick侦听器

---

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

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

以下是解决此问题的几个步骤：

在单击函数时将事件对象作为参数传递

接受该事件作为参数，并对该事件调用stopPropagation

通过注释stopPropagation行验证更改

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

函数myFunction（event）{//传递事件
event.stopPropagation（）；//停止事件冒泡
log（'调用按钮事件'）；
document.getElementById（“userbtn contentid”）.classList.toggle（“show”）；
document.getElementById（“userbtnid”）.classList.toggle（“active”）；
}
window.onclick=函数（事件）{
log（'windowcalled'）；
如果（！event.target.matches（'.userbtn userbtn bb active'））{
var dropdowns=document.getElementsByClassName（“userbtn内容”）；
var i；
对于（i=0；i

在这里输入代码
mxadam

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

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

以下是解决此问题的几个步骤：

在单击函数时将事件对象作为参数传递

接受该事件作为参数，并对该事件调用stopPropagation

通过注释stopPropagation行验证更改

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

函数myFunction（event）{//传递事件
event.stopPropagation（）；//停止事件冒泡
log（'调用按钮事件'）；
document.getElementById（“userbtn contentid”）.classList.toggle（“show”）；
document.getElementById（“userbtnid”）.classList.toggle（“active”）；
}
window.onclick=函数（事件）{
log（'windowcalled'）；
如果（！event.target.matches（'.userbtn userbtn bb active'））{
var dropdowns=document.getElementsByClassName（“userbtn内容”）；
var i；
对于（i=0；i

在这里输入代码
mxadam

您可以检查关于停止事件传播的信息。您可以检查关于停止事件传播的信息。我认为这就是if（！event.target.matches（'.userbtn userbtn bb active'））的原因。{因为它只会在类中按钮处于活动状态时激活？我认为这是if（！event.target.matches（'.userbtn userbtn bb active'））的原因{因为只有当按钮在类中处于活动状态时它才会激活？这应该是接受的答案，因为它比当前接受的答案更详细。这应该是接受的答案，因为它比当前接受的答案更详细。

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

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