事件处理程序优先级并在某些情况下忽略其他处理程序

Question

我有一个带有 2 个 mousedown 事件处理程序的 div，例如

someDiv.addEventListener('mousedown', h1)
someDiv.addEventListener('mousedown', h2)

据我了解，h1 将首先被调用，然后 h2 将被调用，有没有办法在给定条件的情况下停止从 h1 内调用 h2？

Answer 1

在现代浏览器上有，是的：Event#stopImmediatePropagation:

function h1(e) {
    if (someCondition) {
        e.stopImmediatePropagation();
    }
}

现场示例：

var someDiv = document.getElementById("someDiv");
someDiv.addEventListener('mousedown', h1);
someDiv.addEventListener('mousedown', h2);

var counter = 0;
function h1(e) {
  if (counter > 0) {
    console.log("h1: Got mousedown, stopping immediate propagation");
    e.stopImmediatePropagation();
  } else {
    console.log("h1: Got mousedown, allowing propagation");
    this.innerHTML = "Click me again";
    ++counter;
  }
}

function h2() {
  console.log("h2 called");
}

<div id="someDiv">Click me</div>