点击一个不属于“close”按钮的单独按钮，无论如何都是close事件
点击一个不属于“close”按钮的单独按钮，无论如何都是close事件
提问于 2019-06-12 03:24:48
我有一个公告栏，其中有一个中心按钮链接到另一个网站。在最右边还有一个“关闭”按钮。当我单击中心按钮时，close按钮也会被触发。
我测试了一下是否因为我将#close div从#bar div中移除，将其封装在内部，但仍然导致了同样的问题。
var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
addEventListener('click', function() {
bar.classList.add('superHidden');
})
}#bar {
position: fixed;
width: 100vw;
display: flex;
height: 50px;
bottom: 0px;
left: 0px;
}
ul {
display: flex;
justify-content: center;
height: 100%;
list-style: none;
}
li {
margin: auto 0;
font-size: 22px;
}
#close {
position: fixed;
right: 20px;
bottom: 0;
z-index: 1000;
height: 50px;
width: 25px;
cursor: pointer;
}
.superHidden {
display: none!important;
}<div id="bar">
<ul>
<li><a target="_blank" href="google.com"><button >Google</button></a></li>
</ul>
<div id="close">
<ul>
<li>X</li>
</ul>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2019-06-12 03:29:18
您没有为事件侦听器指定目标，因此您将向整个窗口添加一个单击事件
addEventListener('click', function() {
bar.classList.add('superHidden');
})如果单击窗口上的任意位置，则会触发此事件。
听起来你只想把事件添加到“关闭按钮”中：
closeBar.addEventListener('click', function() {
bar.classList.add('superHidden');
})完整示例：
var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
closeBar.addEventListener('click', function() {
bar.classList.add('superHidden');
})
}#bar {
position: fixed;
width: 100vw;
display: flex;
height: 50px;
bottom: 0px;
left: 0px;
}
ul {
display: flex;
justify-content: center;
height: 100%;
list-style: none;
}
li {
margin: auto 0;
font-size: 22px;
}
#close {
position: fixed;
right: 20px;
bottom: 0;
z-index: 1000;
height: 50px;
width: 25px;
cursor: pointer;
}
.superHidden {
display: none!important;
}<div id="bar">
<ul>
<li><a target="_blank" href="google.com"><button >Google</button></a></li>
</ul>
<div id="close">
<ul>
<li>X</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56550512
复制相关文章
相似问题