JavaScript中addEventListener绑定pointerup事件失效，改用onpointerup却正常运行

你遇到的绑定监听器后不触发、换DOM属性赋值就正常的情况，和你编写的工厂函数逻辑无关——毕竟同一个工厂函数生成的回调，通过onpointerup赋值可以正常触发，说明回调本身没有问题。两种绑定方式的表现差异，本质是被Chart.js内部的事件拦截机制触发了规则差异。

两种事件绑定方式的规则差异 #

• 原生addEventListener方法默认在事件冒泡阶段执行绑定的回调，所有同阶段注册的监听器会严格按照注册顺序排队执行，没有内置优先级区分。
• 通过canvas.onpointerup = 回调这种属性赋值方式绑定的逻辑，是DOM元素内置的事件处理入口，属于元素层面的默认事件处理逻辑，不会被第三方库注册的同阶段监听器主动拦截。

结合Chart.js实现的具体触发逻辑 #

Chart.js从v3版本开始，为了实现拖拽、框选、缩放等交互能力，会在canvas元素上注册同类型pointer事件的处理逻辑：

1. 当事件命中图表可交互区域时，Chart.js的内部处理逻辑会主动调用event.stopImmediatePropagation()，这个方法会直接终止当前元素上所有注册顺序排在它之后的待执行监听器。
2. 你在Chart.js初始化完成后，用默认冒泡阶段参数调用canvas.addEventListener('pointerup', 回调)绑定的监听器，注册顺序刚好排在Chart.js自身的监听器后面，因此会被stopImmediatePropagation直接拦截，永远不会触发。
3. 当你改用canvas.onpointerup = 回调的方式绑定时，由于Chart.js的内部逻辑不会主动覆盖用户通过onxxx属性赋值的回调，这个回调会被插入到冒泡队列的最末端，不会被Chart.js的拦截逻辑命中，因此可以正常触发。

适配解决方案 #

如果你希望继续使用addEventListener的方式绑定自定义逻辑，只需要在方法的第三个参数传入捕获阶段配置，将你的监听器执行优先级切到捕获阶段即可：

canvas.addEventListener('pointerup', listenerPointerUp(params), { capture: true });

这种写法下，你的回调会在Chart.js的内部监听器之前执行，不会被拦截逻辑影响。

你在Chrome开发者工具中能看到监听器已经注册到目标元素上，是因为监听器确实完成了注册流程，只是被同元素的拦截逻辑阻断了执行入口，并非注册操作本身失败。

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