父级和子级div上的事件处理程序

如何解决父级和子级div上的事件处理程序

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

解决方法

这是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>

,

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>

,

尝试一下：

 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>