stopImmediatePropagation介绍
原文地址
在众多的方法里面，event.stopImmediatePropagation 算是比较少用的一个方法，拼写上感觉一半像 event.stopPropagation。
对于stopPropagation 的用法大家是众所周知的，他是W3C标准事件方法，用于阻止事件冒泡（非标准情况下，用window.event.stopBubble来阻止冒泡）
而stopImmediatePropagation 的功能比stopPropagation 多一些，除了可以阻止事件冒泡之外，还可以把这个元素绑定的同类型事件也阻止了。
先把下面的代码片断（摘自MDN）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第一个监听函数");
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第三个监听函数");
//该监听函数排在上个函数后面,该函数不会被执行.
}, false);
document.querySelector("div").addEventListener("click", function(event)
{
alert("我是div元素,我是p元素的上层元素");
//p元素的click事件没有向上冒泡,该函数不会被执行.
}, false);
</script>
</body>
</html>
|
p标签绑定了三个click事件，div绑定了一个click事件。
- 其中p第二个click事件中使用了event.stopImmediatePropagation();
当点击时P标签时，第一和第二个alert会正常出现，
第三个alert被event.stopImmediatePropagation();的特性取消了以后的同类型(click)事件
第四个alert不出来同被阻止了事件冒泡，所以也不会出现。
相当于做了event.stopPropagation()后，再return false; jQuery对事件代理做了类似的封装。
我们了解特性之后，看一个简单应用场景:
假设点击一个按钮后，需要检测两个input控件的值，值为空时打印’error’，并停止检测下一个input，同时也需停止提单提交。
我们通常可能会这样写：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form>
<script>
var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(event) {
if (txt1.value == '') {
alert('error1');
return false;
}
if (txt2.value == '') {
alert('error2');
return false;
}
return true;
}, false);
</script>
</body>
</html>
|
但用了event.stopImmediatePropagation时，可以对代码进行更好的抽象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="submit" value="button" id="btn">
</form>
<script>
var txt1 = document.querySelector("#txt1");
var txt2 = document.querySelector("#txt2");
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(event) {
if (txt1.value == '') {
alert('error1');
event.stopImmediatePropagation();
}
if (txt2.value == '') {
alert('error2');
event.stopImmediatePropagation();
}
}, false);
btn.addEventListener("click", function() {
alert('Done');
});
</script>
</body>
</html>
|
题外：
event.isImmediatePropagationStopped 可以用来确定该元素是否有调用过event.stopImmediatePropagation。
浏览器支持情况：
Firefox >=10Chrome
IE >= 9
Opera
Safari