为何在setTimeout内调用event.composedPath()会返回空数组？

复现代码 #

JavaScript #

document.body.addEventListener("click", (e) => {
  console.log(111, e.composedPath());
  setTimeout(() => {
    console.log(222, e.composedPath());
  });
});

CSS #

html, body {
    height: 100%;
}

原因解析 #

• 事件的传播路径信息仅在事件活跃处理阶段有效。当你在点击事件的同步回调中直接调用e.composedPath()时，浏览器正处于该点击事件的处理流程中，会保留事件从触发节点到当前节点的完整路径数据，因此能正常返回包含DOM节点的数组。
• setTimeout的回调会被放入宏任务队列，要等当前事件循环的所有同步任务（包括整个点击事件的处理流程）执行完毕后才会触发。此时浏览器已经完成了该点击事件的全部处理，为了避免不必要的内存占用，会清理事件对象中与传播路径相关的临时数据，所以再次调用e.composedPath()就会返回空数组。

解决方案 #

如果需要在异步回调中使用事件路径，可以在同步回调阶段提前保存路径数据：

document.body.addEventListener("click", (e) => {
  const eventPath = e.composedPath(); // 提前存储路径信息
  console.log(111, eventPath);
  setTimeout(() => {
    console.log(222, eventPath); // 使用已保存的路径
  });
});

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