如何设置jQuery点击事件优先级？让自定义点击逻辑单独执行

要实现点击按钮时仅执行自定义逻辑，同时保留按钮类和模板代码，可以利用jQuery的事件捕获机制和事件阻止方法，具体如下：

• 利用事件捕获优先级：jQuery默认的事件绑定在冒泡阶段执行，而捕获阶段的事件会先于冒泡阶段触发。给目标按钮（#myId）绑定捕获阶段的点击事件，就能优先于模板中.myClass的冒泡阶段事件执行。
• 阻止后续事件执行：在自定义事件处理函数中调用event.stopImmediatePropagation()，这个方法会阻止同一元素上后续所有事件处理函数的执行，包括模板绑定的.myClass点击事件。

具体代码示例：

// 绑定捕获阶段的点击事件，第三个参数true开启捕获模式
$(document).on('click', '#myId', true, function(event) {
  // 执行自定义逻辑：修改#myTarget的边框为红色
  $('#myTarget').css('border', '1px solid red');
  // 阻止后续所有事件处理函数执行
  event.stopImmediatePropagation();
  // 若不需要阻止按钮默认行为，可省略下面这句
  event.preventDefault();
});

补充说明 #

如果无法确定模板代码的执行顺序，这种捕获阶段绑定的方式是最可靠的——捕获阶段的事件总是先于冒泡阶段触发，能确保自定义逻辑先执行并阻断后续的模板事件。

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