event.composedPath()返回对象是否为深克隆？stopPropagation有何弊端？

问题1：使用event.stopPropagation()的弊端 #

• 全局事件失效：页面级的通用监听逻辑（比如点击空白处关闭弹窗、全局埋点统计、框架全局事件处理）依赖事件冒泡触发，阻止冒泡后这些上层逻辑会完全收不到对应事件，且此类问题隐蔽性极强，多人协作场景下排查成本极高。
• 事件委托失效：如果父元素采用事件委托的方式批量监听子元素事件，子元素阻止冒泡会直接导致父元素的委托逻辑完全失效。
• 第三方组件异常：如果你使用的组件库、嵌入的第三方内容依赖事件冒泡实现交互，阻止冒泡会导致这类外部组件出现无响应的异常，且很难定位根因。

如果你的需求只是跳过当前父元素的特定监听逻辑，更推荐在父元素的监听函数内通过事件路径判断是否要跳过执行，而非全局阻止冒泡。

问题2：event.composedPath()返回的元素是否为深拷贝 #

返回的不是任何形式的拷贝，就是真实DOM元素的引用，你通过document.querySelector拿到的元素对象和路径里的对应元素可以直接通过===全等判断匹配。

代码中判断失效的原因 #

你遇到的path.includes(heart)返回false的问题和拷贝无关，常见原因有两种：

1. 元素引用过期：如果你的页面使用React/Vue等响应式框架，触发事件前DOM被框架重绘重建过，你提前查询存储的heart引用已经指向被卸载的旧DOM，和当前页面上的新heart元素不是同一个对象。
2. 存在Shadow DOM隔离：如果heart元素在Shadow DOM树内，且触发的事件composed属性为false，composedPath不会返回Shadow树内的元素，只会返回Shadow根节点。

更稳妥的判断写法 #

无需依赖元素引用匹配，直接用元素的包含关系判断即可：

const heart = document.querySelector('div.heart') as HTMLElement;
// 只要点击目标是heart或它的子元素，就跳过执行
if (heart?.contains(event.target as Node)) {
  return;
}

如果要兼容Shadow DOM场景，可以遍历composedPath判断元素的特征：

const isClickHeart = event.composedPath().some(el => 
  el instanceof HTMLElement && el.classList.contains('heart') && el.tagName === 'DIV'
)
if (isClickHeart) return;

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