这是我的HTML文件
<div class="a">
<div class="b">
</div>
</div>
<script>
document.querySelector('.a').onclick = ()=>{
document.querySelector('.a').style.backgroundColor ='black'
}
document.querySelector('.b').onclick = ()=>{
document.querySelector('.b').style.backgroundColor ='violet'
}
</script>
当我单击类为'b'的div时,也将调用类为'a'的div上的事件处理程序。我只希望调用具有“ b”类事件处理程序的div。有人可以帮忙吗?
答案 0 :(得分:1)
这是Event Bubbling
,这意味着每个事件不仅在目标元素上而且在其祖先元素上触发。
为防止此行为,可以使用Event.stopPropagation()
阻止事件传播到目标元素的祖先元素。
document.querySelector('.a').onclick = () => {
document.querySelector('.a').style.backgroundColor = 'black'
}
document.querySelector('.b').onclick = (event) => {
event.stopPropagation();
document.querySelector('.b').style.backgroundColor = 'violet'
}
div { width: 100px; height: 100px; }
.a { padding: 40px; background: red; }
.b { background: blue; }
<div class="a">
a
<div class="b">b</div>
</div>
答案 1 :(得分:0)
JS中有一个称为Event Bubbling的概念。默认情况下,在特定元素上发生的任何事件都将传播到父对象及其父对象,依此类推,直到事件到达文档为止。
为了阻止这种行为,Event.stopPropagation
会采取行动,并停止将事件传播给父级。
因此,在这种情况下,使用类e.stopPropagation
在div的onclick
处理程序中调用b
,即,内部div将停止将事件传播到父div。
document.querySelector('.a').onclick = (e) => {
document.querySelector('.a').style.backgroundColor = 'black'
}
document.querySelector('.b').onclick = (e) => {
e.stopPropagation();
document.querySelector('.b').style.backgroundColor = 'violet'
}
.b {
width: 50%;
}
<div class="a">
<div class="b">
Dummy
</div>
</div>
答案 2 :(得分:0)
尝试一下:
document.querySelector('.a').onclick = ()=>{
document.querySelector('.a').style.backgroundColor ='black'
}
document.querySelector('.b').onclick = (e) => {
e.stopImmediatePropagation();
document.querySelector('.b').style.backgroundColor ='violet'
}
<div class="a">a
<br/>
<div class="b">
Click here!
</div>
</div>