JS 点击事件监听失效问题及解决

问题

最近在写前端埋点代码，发现饿了么的选择框点击事件没有拦截到，代码如下

document.addEventListener('click', (e) => {
  console.log('click', e.target);
});
document.addEventListener('mousedown', (e) => {
  console.log('mousedown', e.target);
});

在 https://element.eleme.cn/#/zh-CN/component/select 页面打开控制台，执行上面的代码，点击选择框，发现没有拦截到点击事件。

解决

果断群发问题，群友 @日服第一切图宅 24 年铁粉 杭州 - 小菜鸡 - 努力找对象的灵/yt 说因为冒泡被阻止了。那怎么拿呢？

addEventListener 第三个参数可以设置是否冒泡，设置为 true 就可以拿到了。

document.addEventListener('click', (e) => {
  console.log('click', e.target);
}，true);
document.addEventListener('mousedown', (e) => {
  console.log('mousedown', e.target);
}, true);

addEventListener

后记

群除我佬

另外有一个有意思的地方就是，点击事件顺序如下，顺带着记一下

mousedown
mouseup
click

还有 @上海 - 前端 - 铁树 提及的事件委托，有时间也可以看一下，就是 ul 下 li 不用一个个绑定事件，直接绑定 ul，然后通过事件冒泡拿到点击的 li。