原生JS无法捕获jQuery触发的<a>元素click事件问题

问题重现 #

你用原生JS实现了document级别的事件委托：

document.addEventListener('click', function(e) {
  console.log("some element was clicked");
  console.log(e.target);
  // 后续对目标元素进行筛选
});

但当用jQuery触发<a href="#">的click事件时，原生的事件处理器完全没反应；而触发<b>元素时却能正常触发，类似代码如下：

// 触发a标签，原生监听无响应
$('a').click();
// 触发b标签，原生监听正常触发
$('b').click();

最可能的原因：元素绑定了jQuery的click事件并阻止了冒泡 #

这种差异最常见的情况是：你的<a>元素额外绑定了jQuery的click事件处理器，并且在该处理器中调用了e.stopPropagation()，直接阻止了事件向上冒泡。

比如你可能写过这样的代码：

// 这段代码会导致事件无法冒泡到document的原生监听
$('a').click(function(e) {
  e.stopPropagation(); // 阻止事件冒泡
  // 其他业务逻辑
});

当你用$('a').click()触发事件时，jQuery会先执行这个绑定的处理器，stopPropagation()会打断事件的冒泡链，让事件无法传递到document层级，所以原生的addEventListener监听就捕获不到这个事件。而<b>元素没有这类阻止冒泡的逻辑，事件就能正常向上传递到document。

其他可能的原因及解决方案 #

原因1：旧版本jQuery的事件模拟缺陷 #

在一些非常老旧的jQuery版本中，trigger()方法触发的事件可能没有完全模拟原生事件的冒泡行为。如果是这种情况，可以改用原生DOM方法触发事件，确保事件正常冒泡：

// 改用原生JS触发a标签的click事件
document.querySelector('a').click();

原因2：筛选逻辑误排除了元素 #

检查原生事件处理器中的筛选逻辑，比如是否只处理特定类名、标签的元素，导致<a>元素被过滤掉，让你误以为事件没触发。比如如果你的筛选逻辑是：

if(e.target.tagName === 'B') {
  // 仅处理<b>元素的逻辑
}

那触发<a>时事件其实已经被捕获，但因为筛选条件不满足，没有后续输出，容易造成“事件未触发”的错觉。

快速验证方法 #

可以暂时去掉原生监听中的筛选逻辑，直接打印事件的核心属性，确认事件是否真的被触发：

document.addEventListener('click', function(e) {
  console.log("事件已触发", "目标元素：", e.target, "是否冒泡：", e.bubbles);
});

如果触发<a>时能看到这条日志，说明事件已经被捕获，问题出在你的筛选逻辑上；如果看不到，说明事件确实被阻止了冒泡。

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