如何使用jQuery创建不可取消的自定义事件

不可取消事件实现方案 #

jQuery原生trigger()方法没有提供直接设置cancelable: false的配置入口，要实现无法被中断传播、无法被取消默认行为的事件，同时保留冒泡能力（满足pub/sub场景需求，替代不冒泡的triggerHandler()），最稳妥的方案是使用独立jQuery实例做事件隔离（见后续修复方案）；如果需要和原生事件体系打通，可直接构造原生自定义事件派发：

// 配置bubbles保证冒泡链路完整，cancelable:false禁止取消默认行为
const nonCancelableEvent = new Event("customLoad", {
  cancelable: false,
  bubbles: true
})
document.dispatchEvent(nonCancelableEvent)

通过这种方式派发的事件，所有通过jQuery.on()绑定的监听都可以正常捕获。注意原生事件的cancelable: false配置仅能禁止preventDefault()生效，无法阻止其他监听在捕获阶段调用stopPropagation()中断传播，对隔离性要求高的场景优先选择私有实例方案。
不推荐通过重写事件原型方法强制屏蔽取消接口的方案，侵入性过高，容易干扰其他正常业务逻辑。

关于事件绑定节点替换的可行性 #

如果确实存在第三方代码在事件冒泡链路中调用stopPropagation()拦截事件，把监听目标从window换成document确实能降低被拦截的概率——DOM标准事件冒泡链路为触发源节点 -> 逐级父节点 -> document -> window，document在冒泡链路中早于window，被中途拦截的可能性更低。但这个方案仅能规避传播拦截问题，无法解决你已经定位到的jQuery重复加载根因。

重复加载jQuery导致事件异常的原理 #

jQuery的事件系统不直接把事件监听挂载到DOM节点上，所有通过.on()绑定的监听都存储在当前jQuery实例内部的独立缓存中，仅通过DOM节点上的特殊标记做关联。
当你完成事件绑定后页面再次加载新的jQuery实例时：

• 全局jQuery、$变量会被新实例覆盖，新实例内部的事件缓存为空
• 之前通过旧jQuery实例绑定的所有监听，都存在旧实例的缓存中，新实例调用.trigger()时只会遍历自身缓存的监听队列，完全读不到之前绑定的逻辑，最终表现为事件丢失、传播异常，和stopPropagation调用没有直接关系。

WordPress场景最终修复方案 #

• 优先从根源解决重复加载问题：通过WordPress官方提供的wp_enqueue_script接口注册加载jQuery，删除主题中硬编码的jQuery引入标签，保证全局仅存在一个jQuery实例。
• 如果无法修改第三方主题的加载逻辑，可在自身代码最开头锁定当前jQuery实例，后续所有事件操作都基于私有实例执行，避免全局覆盖影响：

// 代码最顶部执行，移交全局jQuery控制权，锁定私有实例
const privateJQ = jQuery.noConflict(true)
// 所有业务逻辑统一使用privateJQ操作，不受后续重复加载的jQuery影响
privateJQ(document).on("customLoad", () => {
  // 业务逻辑
})
privateJQ(document).trigger("customLoad")

这种方案下你的pub/sub事件系统完全和全局环境隔离，既不会被后续加载的jQuery覆盖缓存，第三方代码也无法访问到你的事件实例调用传播中断方法，稳定性最高。建议同时将事件绑定、触发的目标统一为document，进一步降低事件被拦截的概率。

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