我有一个用于下拉列表的按钮，但当我单击它时，单击会触发关闭下拉列表的窗口。如果我删除窗口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>
该问题是由于事件冒泡或传播引起的。
单击该按钮时，事件将冒泡到其父对象，直到到达窗口对象。您需要通过对事件调用stopPropagation函数来停止事件传播。
以下是解决问题的几个步骤：
- 在单击函数时将事件对象作为参数传递
- 接受事件作为参数，并对该事件调用stopPropagation
- 通过注释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>function myFunction(event) {
event.stopPropagation();
document.getElementById("userbtn-contentid").classList.toggle("show");
document.getElementById("userbtnid").classList.toggle("active");
}
Event.stopPropagation((
这是由于事件正在冒泡。-https://javascript.info/bubbling-and-capturing点击按钮即可触发：
- myFunction((
- 触发窗口。包含侦听器