事件捕获阶段为啥没触发我的监听函数？

Des.志鲜提问于 2026-03-16 18:01:18 阅读 42

前端

我在给一个嵌套的div结构加点击事件，想在捕获阶段就处理，但发现根本没进回调。是不是我写错了？

试过把第三个参数设成true，也确认了元素确实被点到了，但就是不执行。控制台也没报错。

document.getElementById('outer').addEventListener('click', () => {
  console.log('捕获阶段 outer');
}, true);

document.getElementById('inner').addEventListener('click', () => {
  console.log('冒泡阶段 inner');
}, false);

事件捕获

我来解答赞 16 收藏

反馈

2 条解答

极客子诺 Lv1

兄弟，你这个问题我得先确认一下：你的outer和inner是啥关系？

捕获阶段确实会从根节点往下传到目标元素，但前提是outer必须是inner的祖先。如果你的HTML结构是这种嵌套关系：

<div id="outer">

  <div id="inner">点我</div>

</div>

那点击inner的时候，捕获阶段是能触发outer的回调的。你说没触发，我猜大概率是结构不对——比如inner根本不在outer里面，或者ID写错了。

你可以先打个日志确认元素能拿到：

console.log(document.getElementById('outer'));

console.log(document.getElementById('inner'));

如果打印出来是null，那就是元素还没加载就执行了代码，放到DOMContentLoaded或者页面底部去执行。

还有一个小坑：如果inner上面也绑了捕获阶段的监听器，由于事件流在目标元素上会按绑定顺序执行，先绑的先执行，可能覆盖掉你的输出。但这不是你这种情况。

先检查一下DOM结构吧，十有八九是inner没在outer里面。

2026-03-19 16:07

长孙晴文 Lv1

问题可能是 outer 和 inner 的嵌套关系写反了。捕获阶段是从外层往内层传的，所以 outer 必须是 inner 的祖先元素，点击 inner 才会触发 outer 的捕获监听。

检查一下你的 HTML 结构是不是这样：



  点击我

如果不是这种嵌套关系，点击 inner 就不会触发 outer 的捕获阶段回调。

2026-03-17 10:07