javascript - 父子 div 上的事件处理程序

Question

这是我的 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。有人可以帮忙吗？

标签： javascriptevent-handlingdom-eventsevent-bubbling

Answer 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>