javascript中可通过addeventlistener第三个参数设为true启用事件捕获，在事件自上而下传播时拦截；需调用stoppropagation()才能阻止后续阶段执行，且捕获监听器优先于目标和冒泡阶段执行。

在 JavaScript 中，可以通过 addEventListener 的第三个参数传入 true，启用事件捕获阶段监听，从而在事件到达目标元素之前（即自上而下经过祖先元素时）拦截点击事件。

启用捕获模式监听

默认情况下，事件监听器在冒泡阶段触发（第三个参数为 false 或省略）。要进入捕获阶段，需显式设置为 true：

• element.addEventListener('click', handler, true) —— 在捕获阶段执行
• 该监听器会在事件从 document → html → body → 祖先元素 → 目标元素的途中被触发
• 多个捕获监听器按 DOM 树由外向内顺序执行（如 div#outer 先于 div#inner）

在祖先元素中拦截并阻止后续传递

若想真正“拦截”——即阻止事件继续向下传播到更深层的目标或后续阶段（包括目标阶段和冒泡阶段），需在捕获处理函数中调用：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• event.stopPropagation()：阻止事件继续在当前阶段（捕获）向子元素传播，也阻止进入目标阶段和冒泡阶段
• event.stopImmediatePropagation()：除了阻止传播，还阻止同一阶段其他监听器执行（比如同个元素上有多个捕获监听器）
• 注意：event.preventDefault() 不阻止传播，只取消默认行为（如链接跳转、表单提交）

实际拦截示例

假设结构为：

<div id="parent"><button id="child">点我</button></div>

• 给 #parent 添加捕获监听：<code>parent.addEventListener('click', e => { e.stopPropagation(); console.log('父级已拦截'); }, true)
• 此时点击 #child，控制台输出“父级已拦截”，但 #child 自身的点击监听（无论捕获还是冒泡）都不会触发
• 如果只希望阻止冒泡但允许目标阶段执行，就不能在捕获阶段调用 stopPropagation，而应在目标或冒泡阶段处理

捕获与冒泡共存时的执行顺序

一个事件流完整经历：捕获阶段 → 目标阶段 → 冒泡阶段。若多个阶段都有监听器，执行顺序为：

• 所有捕获监听器（从外向内）
• 目标元素上的监听器（捕获 & 冒泡都会触发，按注册顺序）
• 所有冒泡监听器（从内向外）
• 因此，祖先元素的捕获监听器天然早于目标元素自身的任何监听器执行，适合做统一前置拦截（如权限校验、操作节流）

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南