[Javascript] stopPropagation与stopImmediatePropagation



Answers

演示这些传播停止如何工作的一个小示例。

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});
div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

有三个事件处理程序绑定。 如果我们不停止任何传播,那么应该有四个警报 - 三个在子div上,另一个在父div上。

如果我们停止传播事件,那么会有3个警报(全部在内部子div上)。 由于该事件不会传播到DOM层次结构中,因此父级div不会看到它,并且其处理程序不会触发。

如果我们立即停止传播,那么只会有一次警报。 即使有三个事件处理程序连接到内部子div,只有1被执行,并且任何进一步的传播都会立即终止,即使在同一个元素中也是如此。

Question

event.stopPropagation()event.stopImmediatePropagation()之间有什么区别?




1) event.stopPropagation(): =>它仅用于停止执行相应的父处理程序。

2) event.stopImmediatePropagation(): =>它用于停止执行相应的父处理程序,并且除当前处理程序之外还附加处理程序或函数。 =>它也停止所有连接到整个DOM的当前元素的处理程序。

这里是例子: Jsfiddle

谢谢,-Sahil




event.stopPropagation将阻止父元素上的处理程序运行。
调用event.stopImmediatePropagation也会阻止同一元素上的其他处理程序运行。




Links