父子 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。有人可以帮忙吗？

Answer 1

这是Event Bubbling，这意味着每个事件不仅会在目标元素上触发，还会在其祖先元素上触发。

为防止此行为，您可以使用Event.stopPropagation()to 阻止事件传播到目标元素的祖先元素。

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>

Answer 2

JS中有一个概念叫做事件冒泡。默认情况下，特定元素上发生的任何事件都将传播到父元素及其父元素，依此类推，直到事件到达文档。

为了阻止这种行为，Event.stopPropagation将进行救援并将停止将事件传播给父级。

因此，在这种情况下调用e.stopPropagation具有onclick类 ie 的 div 的处理程序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>

Answer 3

尝试这个 ：

 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>