看到
e.stopImmediatePropagation()这个方法时，记忆有点模糊了。特地回顾一下。
基本概念
-
stopImmediatePropagation方法：该方法作用在当前节点及事件链的所有后续节点上，目的是在执行完当前事件处理程序后，停止当前节点及所有后续节点的同类事件处理程序的运行。 -
stopPropagation方法：该方法作用在后续节点上，目的在执行完绑定到当前元素上的所有同类事件处理程序后，停止执行所有后续节点的同类事件处理程序。
区别
- 两个方法只差一个
Immediate -
stopPropagation方法，调用后，会立即停止对后续节点的访问，但是会执行完绑定到当前节点上的所有同类事件处理程序；简言之，只能阻止父类元素的冒泡，就是一个元素绑定了多个同类事件（比如click），且父元素也绑定了该类事件，那么在元素调用stopPropagation方法后，父元素不会执行同类事件，但是该元素绑定的多个同类事件会依次执行。 -
stopImmediatePropagation方法，调用后，除了所有后续节点，绑定到当前元素上的、当前事件处理程序之后的事件处理程序都不会执行。简言之，既能阻止父类元素冒泡，也能阻止同类事件的执行。假如一个元素绑定了多个同类事件（比如click），且父元素也绑定了该类事件，那么在元素调用stopImmediatePropagation方法后，父元素不会执行同类事件，该元素执行完当前事件，绑定的同类事件也不会执行。
举例
<div id="div">
<input type="text" id="input"/>
</div>
var dom = document.querySelector('#input');
dom.addEventListener('blur', function (e) {
console.log('blur 1');
});
dom.addEventListener('blur', function (e) {
console.log('blur 2');
});
dom.addEventListener('keyup', function (e) {
console.log('keyup 1');
})
dom.addEventListener('keyup', function (e) {
console.log('keyup 2');
})
dom.addEventListener('click', function (e) {
//e.stopPropagation();
e.stopImmediatePropagation();
console.log('dom click 1');
})
dom.addEventListener('click', function (e) {
console.log('dom click 2');
})
var div = document.querySelector('#div');
div.addEventListener('click', function (e) {
console.log('div click 1');
})
div.addEventListener('click', function (e) {
console.log('div click 2');
})
结果说明：
- 不调用，点击输入框，
dom click 1，dom click2，div click 1，div click2会依次执行，blur，keyup事件触发后也是依次执行。 - 调用
stopPropagation方法后，点击输入框，dom click 1，dom click2会依次执行，但阻止冒泡，父类元素的事同类事件不会执行。blur，keyup事件触发后会依次执行。 - 调用
stopImmediatePropagation方法后，点击输入框，只会执行dom click1，会阻止冒泡，且当前元素绑定的同类事件也会阻止。blur，keyup事件触发后会依次执行。