为什么子元素article的click事件未冒泡到其父级p元素？

核心原因 #

你遇到的问题和事件冒泡规则无关，本质是HTML标签嵌套规则不合法导致浏览器自动修正了DOM结构，两个元素根本不是你预期的父子关系：

• HTML规范明确规定<p>（段落标签）仅允许嵌套行内元素（比如<span>、<a>、<strong>等），不允许嵌套<article>、<div>这类块级元素。
• 当浏览器解析到你写的<p id="para">内部出现<article>标签时，会自动提前闭合<p>标签，最终实际生成的DOM结构如下：

<p id="para"></p>
<article id="article">Click Me!</article>
<!-- 剩下的</p>会被浏览器判定为无效标签直接忽略 -->

这时候<article>和<p>是同级兄弟关系，自然不存在事件冒泡的父子链路，点击<article>当然不会触发<p>上绑定的点击事件。

额外现象解释 #

你取消注释<article>的事件监听后事件能正常触发，是因为该事件是直接绑定到<article>元素本身的，和DOM嵌套结构、冒泡逻辑都没有关系，只要点击对应元素就会触发。

修复方案 #

把外层的<p>标签替换为允许嵌套块级元素的容器标签（比如<div>）即可，修改后的HTML如下：

<div id="para">
    <article id="article">Click Me!</article>
</div>

修改后两个元素是正常的父子嵌套关系，点击<article>的事件就会正常冒泡到父级元素，触发绑定的回调。

内容的提问来源于stack exchange，提问作者Abhinav Jha