为什么 event.preventDefault() 能够阻止子元素的默认浏览器行为?

Question

我知道event.preventDefault()可以防止浏览器默认行为，但是如果您将其放在父元素的事件处理程序上，为什么它会起作用？

例：

document.getElementById("parent").addEventListener('click', (e)=>{
alert('parent click');
//e.stopPropagation();
e.preventDefault();   

});
document.getElementById("button").addEventListener('click', (e)=>{
alert('click');
//e.stopPropagation();
//e.preventDefault(); 
//return true;

});

.foo{
background-color: red;
text-align: center;
padding: 16px;
margin-bottom: 16px;
}

<div id ="parent">
<a href="http://www.google.com" target="_blank">
<div id="button" class="foo" tabindex='-1'> hello </div>
</a>
</div>

如果单击该按钮，则没有导航。为什么有效？

Answer 1

因为这就是 DOM 结构的工作方式。在这种情况下，按钮是父按钮的一部分。因此，单击按钮也是单击父按钮，因此将触发两个单击。请注意，onclicks将从下到上触发，这意味着按钮事件将首先被触发，之后它的父级被触发，之后父级的父级将获得onclick事件，依此类推。

如果这导致不需要的结果，您可以通过event.stopPropagation()函数来防止这种行为，我想您已经注意到了。如果调用此方法，则不会从该元素向上在父元素上触发事件。