如何在stopPropagation()执行前捕获点击事件？捕获含该方法的链接点击

疑问解答：是否能在stopPropagation()执行前捕获点击事件？ #

可以，利用事件捕获阶段就能实现。

DOM事件流分为三个核心阶段：

• 捕获阶段：事件从最外层DOM节点（如document）向内层目标节点传播
• 目标阶段：事件到达触发的目标元素
• 冒泡阶段：事件从目标元素向外层节点反向传播

默认的onclick属性、不带第三个参数的addEventListener都是绑定在冒泡阶段。如果目标元素的事件处理中调用了e.stopPropagation()，会阻止事件继续向父节点冒泡，导致父节点的冒泡阶段监听器无法触发。但如果在捕获阶段绑定事件监听器，事件会先经过外层节点的捕获处理，再到达目标元素的事件逻辑，这样就能在stopPropagation()执行前捕获到事件。

场景解决方案：抓取带stopPropagation()的链接点击事件 #

针对你的场景，只需将document.body的点击监听改为捕获阶段即可，具体实现如下：

修改后的JavaScript代码 #

function myFuncCanNotBeEdited(e) {
  e.stopPropagation();
  //……
  //此处执行其他重要代码
}

// 第三个参数设为true，开启捕获阶段监听
document.body.addEventListener('click', e => {
  console.log(e.target);
}, true);

原理说明 #

点击第一个带stopPropagation()的链接时，事件流会优先触发document.body的捕获阶段监听器（此时还未执行链接的onclick方法），之后才会执行链接的myFuncCanNotBeEdited方法。即使里面调用了e.stopPropagation()，也不会影响已经触发的捕获阶段监听逻辑。

额外方案（不推荐） #

如果无法修改监听方式，还可以通过重写Event.prototype.stopPropagation绕过阻止，但这种方法会全局影响所有事件逻辑，可能引发意外问题，仅作参考：

const originalStopPropagation = Event.prototype.stopPropagation;
Event.prototype.stopPropagation = function() {
  // 在这里添加自定义捕获逻辑
  console.log('捕获到stopPropagation调用，目标元素：', this.target);
  // 调用原方法保留原有逻辑
  originalStopPropagation.call(this);
};

document.body.onclick = e => console.log(e.target);

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