为什么我刚派发事件就立即触发?
Why the event trigger immediately when I just dispatch it?
我想在单击元素 #b
时执行一些操作,然后在 handleB()
完成
之前分派另一个事件侦听器
当我被点击时 #b
#a
上的事件 click
已成功发送并且它也已触发但我不想触发它
这是怎么回事??
document.getElementById('b').addEventListener('click', handleB)
function handleB() {
alert('Handle B!');
document.getElementById('a').addEventListener('click', handleA)
}
<div id="a">
AAA
<div id="b">BBB</div>
</div>
发生这种情况是因为#b 事件冒泡到#a,并且您已经在 handleB 中添加了点击事件侦听器。它会随着#b 的事件立即触发。您必须停止事件才能冒泡。下面是工作示例:
document.getElementById('b').addEventListener('click', handleB);
function handleB(event) {
event.stopPropagation();
console.log('b clicked');
document.getElementById('a').addEventListener('click', handleA)
}
function handleA() {
console.log('a clicked');
}
#a {
width: 200px;
height: 200px;
background-color: red;
}
#b {
width: 100px;
height: 100px;
background-color: green;
}
<div id="a">
<div id="b"></div>
</div>
我想在单击元素 #b
时执行一些操作,然后在 handleB()
完成
当我被点击时 #b
#a
上的事件 click
已成功发送并且它也已触发但我不想触发它
这是怎么回事??
document.getElementById('b').addEventListener('click', handleB)
function handleB() {
alert('Handle B!');
document.getElementById('a').addEventListener('click', handleA)
}
<div id="a">
AAA
<div id="b">BBB</div>
</div>
发生这种情况是因为#b 事件冒泡到#a,并且您已经在 handleB 中添加了点击事件侦听器。它会随着#b 的事件立即触发。您必须停止事件才能冒泡。下面是工作示例:
document.getElementById('b').addEventListener('click', handleB);
function handleB(event) {
event.stopPropagation();
console.log('b clicked');
document.getElementById('a').addEventListener('click', handleA)
}
function handleA() {
console.log('a clicked');
}
#a {
width: 200px;
height: 200px;
background-color: red;
}
#b {
width: 100px;
height: 100px;
background-color: green;
}
<div id="a">
<div id="b"></div>
</div>