父子 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 = () => {&nbsp; document.querySelector('.a').style.backgroundColor = 'black'}document.querySelector('.b').onclick = (event) => {&nbsp; event.stopPropagation();&nbsp; document.querySelector('.b').style.backgroundColor = 'violet'}div { width: 100px; height: 100px; }.a { padding: 40px; background: red; }.b { background: blue; }<div class="a">&nbsp; a&nbsp; <div class="b">b</div></div>

Answer 2

JS中有一个概念叫做事件冒泡。默认情况下，特定元素上发生的任何事件都将传播到父元素及其父元素，依此类推，直到事件到达文档。为了阻止这种行为，Event.stopPropagation将进行救援并将停止将事件传播给父级。因此，在这种情况下调用e.stopPropagation具有onclick类 ie 的 div 的处理程序b，内部 div 将停止将事件传播到父 div。document.querySelector('.a').onclick = (e) => {&nbsp; document.querySelector('.a').style.backgroundColor = 'black'}document.querySelector('.b').onclick = (e) => {&nbsp; e.stopPropagation();&nbsp; document.querySelector('.b').style.backgroundColor = 'violet'}.b {&nbsp; width: 50%;}<div class="a">&nbsp; <div class="b">&nbsp; Dummy&nbsp; </div></div>

Answer 3

尝试这个 ：&nbsp;document.querySelector('.a').onclick = ()=>{&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.a').style.backgroundColor ='black'&nbsp; &nbsp; }&nbsp; &nbsp; document.querySelector('.b').onclick = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; e.stopImmediatePropagation();&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.b').style.backgroundColor ='violet'&nbsp; &nbsp; }<div class="a">a&nbsp; &nbsp; <br/>&nbsp; &nbsp; <div class="b">&nbsp; &nbsp; &nbsp; &nbsp; Click here!&nbsp; &nbsp; </div></div>