Saber 酱的抱枕

Fly me to the moon

04/26
2017
学习

JavaScript中阻止事件冒泡

saber 撰写 3条回复 2,182次查看

JavaScript中的event.stopPropagation方法用于阻止事件冒泡，这样该事件不会继续向上级元素传递。

不过今天我想讲的是event.stopImmediatePropagation，它除了具有event.stopPropagation方法的阻止事件冒泡的功能外，还有另一个功能，就是会中止执行在它后面添加/执行的同类型事件。也就是说干完我这件事件，后面的同类型的事情就都不用干了。

示例：

document.body.addEventListener("click", function () {
	console.log("1");
});
document.body.addEventListener("click", function (ev) {
	// 在它后面添加的同类型函数不会再执行了，但是早于它添加的函数还是会执行
	ev.stopImmediatePropagation();
	console.log("2");
});
document.body.addEventListener("click", function () {
	console.log("3");
});

本来，由addEventListener添加的同类型事件会按照添加的顺序依次执行。这个例子中就是点击页面会依次输出1、2、3。

在2中加了ev.stopImmediatePropagation()之后，第二个添加的事件执行完，后面添加的同类型事件就不会执行了——不会输出3了。

注意：

1.stopImmediatePropagation方法会阻止的是同类型的，比如在click事件里执行了stopImmediatePropagation方法，并不能阻止在其后添加的其他类型的事件。
2.在执行stopImmediatePropagation的事件里，在stopImmediatePropagation后面的代码依然会执行。（如上例会继续输出2）。

ps：jQuery有个event.isImmediatePropagationStopped方法来检测该事件上是否设置了stopImmediatePropagation方法。但是原生JavaScript里好像没自带这个检测的方法。

JavaScript中阻止事件冒泡