如何用 event.composedPath 获取事件触发经过的所有节点

event.composedPath()用于获取事件在Shadow DOM中的完整传播路径返回从目标节点到根节点的数组适用于Web Components中跨Shadow边界精准判断事件来源或委托。event.composedPath() 是一个用于获取事件在 Shadow DOM 中传播路径的方法它返回一个包含事件经过的所有节点包括 Shadow DOM 内部节点的数组从最内层目标节点开始一直到根节点通常是 document 或 shadowRoot 的宿主元素。什么时候需要使用 composedPath()当你的页面使用了 Web Components尤其是带 Shadow DOM 的自定义元素且事件从 Shadow DOM 内部触发、冒泡到外部 DOM 时普通 event.path非标准或 event.target/event.currentTarget 可能无法反映完整路径——因为 Shadow DOM 有“穿透边界”的限制。而 composedPath() 是标准方法能准确还原事件真实经过的全部节点链。例如点击一个封装在 Shadow DOM 中的按钮想判断它是否位于某个特定自定义组件内部或是否经过某类容器就需要这个路径。基本用法和返回结构调用方式很简单element.addEventListener(click, (e) { const path e.composedPath(); console.log(path); // [button, #shadow-root, my-card, body, html, document]});返回数组顺序是从事件目标开始逐级向上直到根。注意 文心快码 文心快码Comate是百度推出的一款AI辅助编程工具