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。请注意，onclicks将自下而上触发，这意味着将首先触发button事件，然后触发其父级，然后，父级的父级将得到onclick事件，依此类推。

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

为什么event.preventDefault（）能够阻止子元素的默认浏览器行为？

1 个答案: