父子事件处理程序 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>

当我用 class 'b' 单击 div 时，class 'a' div 上的事件处理程序也是叫。我只想调用 div 和 'b' class 事件处理程序。有人可以帮忙吗？

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>

Answer 2

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

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

所以在这种情况下，在 div 的 onclick 处理程序中使用 class b 调用 e.stopPropagation，即内部 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>

父子事件处理程序 div

Event handlers on parent and child div

javascript

event-handling

dom-events

event-bubbling