如何让后绑定的jQuery点击事件优先于先绑定的执行？

jQuery中同一元素的同类型事件处理函数，默认按绑定顺序依次执行，后绑定的会排在现有事件之后触发。stopImmediatePropagation()只能阻止当前事件之后的处理函数执行，无法改变已有的执行顺序，要实现后绑定事件优先执行，有两种可行方案：

方案一：调整jQuery内部的事件处理函数顺序 #

通过jQuery的_data()方法获取元素上存储的事件列表，将我们的处理函数从列表末尾移到开头。

// 模拟插件已绑定的事件
jQuery('.element').click(function(){
    console.log('click event 1');
});

// 定义我们的事件处理函数
var ourClickHandler = function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    console.log('优先执行的点击事件');
};
// 先常规绑定事件
jQuery('.element').click(ourClickHandler);

// 调整事件执行顺序
jQuery('.element').each(function(){
    const elem = this;
    // 获取jQuery存储的事件集合
    const events = jQuery._data(elem, 'events');
    if(events?.click){
        const clickHandlers = events.click;
        // 找到我们的处理函数在数组中的位置
        const handlerIndex = clickHandlers.findIndex(item => item.handler === ourClickHandler);
        if(handlerIndex !== -1){
            // 移除当前处理函数，插入到数组开头
            const targetHandler = clickHandlers.splice(handlerIndex, 1)[0];
            clickHandlers.unshift(targetHandler);
        }
    }
});

注意：该方案依赖jQuery的内部实现逻辑，不同版本（如3.x与1.x）的事件存储结构可能有差异，使用前需测试对应版本的兼容性。

方案二：利用原生事件捕获阶段触发 #

事件流的捕获阶段会早于冒泡阶段执行，jQuery默认在冒泡阶段绑定事件，我们可以通过原生addEventListener在捕获阶段绑定事件，从而优先执行。

// 模拟插件已绑定的冒泡阶段事件
jQuery('.element').click(function(){
    console.log('click event 1');
});

// 在捕获阶段绑定我们的事件
document.addEventListener('click', function(e){
    // 判断点击目标是否为目标元素（支持嵌套元素的情况）
    if(jQuery(e.target).closest('.element').length > 0){
        e.preventDefault();
        e.stopImmediatePropagation();
        console.log('优先执行的点击事件');
    }
}, true); // 第三个参数设为true，启用捕获阶段

该方案不依赖jQuery内部机制，兼容性更好，适合跨版本场景。需要注意：如果页面中存在其他捕获阶段的事件，也要考虑执行顺序问题。

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