如何添加一个事件处理程序来阻止任何其他具有 jQuery 的点击事件处理程序？

Question

我想为链接或按钮实现一个确认逻辑，我可以在其中用特殊的数据确认属性注释相关元素。如果元素上存在此属性，我想附加一个点击处理程序，它能够阻止任何其他处理程序，包括默认事件，以及在添加我的确认处理程序之前或之后添加的其他 jQuery 处理程序。

这是我的代码：

  $(document).on("click", "a[data-confirm], button[data-confirm]", function(e) {
    var confirmData = $(this).data("confirm");
    if (confirmData === "true")
      confirmData = $(this).prop("title");
    if (confirmData && !confirm(confirmData)) {
      e.stopImmediatePropagation();
      e.stopPropagation();
      e.preventDefault();
      return false;
    }
    return true;
  });

问题是我不确定这个处理程序将进入处理程序列表的哪个位置，所以我想其他处理程序很可能会在它之前执行。另外，我不确定这个处理程序是否会先行，例如 knockoutjs' 点击绑定。

Answer 1

要防止调用其他处理程序，请使用 stopImmediatePropagation() 并防止默认行为，请使用 preventDefault().

像这样：

$("body").on("click", ".elementClass[attributeName]", function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
});

通过在选择器中添加[attributeName]，选择器将只应用于属性为"attributeName"

的元素

在上面的示例中，这将在您的 $(document) 处理程序之前执行，因为事件会冒泡 DOM 并在到达 [=18= 之前到达 body ].为确保尽快附加此事件，您可以像这样将处理程序附加到元素：

$(".elementClass[attributeName]").on("click", function(event){
    event.stopImmediatePropagation();
    event.preventDefault();
});

这样做的缺点是，必须在元素具有属性后附加此处理程序。

然而，您可以仅使用普通 JavaScript 的另一种技术是事件捕获：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener。

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture

你可以这样做：

document.addEventListener("click", function(event){
    if(event.target.hasAttribute("attributeName")){ // jQuery: if($(event.target).attr("attributeName")){...
        event.stopPropagation();
        event.preventDefault();
        //Do stuff
    }
}, true);

通过在末尾添加 true 捕获事件，这意味着这将在其他处理程序之前运行。

Answer 2

如果一个元素有多个点击处理程序，则这些处理程序的执行顺序是未指定的。所以你不能可靠地让一个总是先执行。

Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.

W3C-Events-flow-basics

如何添加一个事件处理程序来阻止任何其他具有 jQuery 的点击事件处理程序？

How to add an eventhandler which can prevent any other click eventhandler with jQuery?

javascript

jquery

javascript-events