[英]window.onclick fires as soon as I click button
I have a button for a dropdown but when I click it the window onclick fires which closes the dropdown.我有一个下拉按钮,但是当我单击它时,窗口 onclick 会触发关闭下拉列表。 If I remove the windows onclick it works fine using just the button
如果我删除 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>
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.单击按钮时,事件会冒泡到其父级,直到它到达 window 对象。 You need to stop the event propagation by calling the stopPropagation function on the event.
您需要通过对事件调用stopPropagation函数来停止事件传播。
Here are a few steps to resolve the issue:以下是解决问题的几个步骤:
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>
This is due to the fact that event is bubbling.这是因为事件正在冒泡。 - https://javascript.info/bubbling-and-capturing By clicking the button you are triggering:
- https://javascript.info/bubbling-and-capturing通过单击您触发的按钮:
function myFunction(event) {
event.stopPropagation();
document.getElementById("userbtn-contentid").classList.toggle("show");
document.getElementById("userbtnid").classList.toggle("active");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.