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

Question

I understand that event.preventDefault() can prevent browser default behavior, but why does it work if you put this on parent element's event handler?

Example:

 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>

If you click the button, there is no navigation. Why does it work?

Answer 1

Because that is the way how the DOM structure works. In this case, the button is a part of the parent. Therefore a click on the button is also a click on the parent, and therefore both onclicks will be triggered. Note that the onclicks will be triggered from the bottom up, meaning the buttons event will be triggered first, after which it's parent gets triggered, after which the parent of the parent will get an onclick event and so on.

If this results in an unwanted result you can prevent this behavior by, as i think you already noticed, the event.stopPropagation() function. If this method is called the event will not be triggered on the parents from that element upward.