event.stopImmediatePropagation()

类别：事件 > 事件对象

event.stopImmediatePropagation()返回类型：

描述：确保剩余的事件处理函数不被执行，防止事件沿着DOM树向上传播。

除了阻止元素上的额外处理函数被执行，它方法还通过潜在调用event.stopPropagation()阻止了冒泡。如果只想防止事件冒泡到祖先互，但是允许同一元素上的事件处理函数执行，我们可以使用event.stopPropagation()来代替。

使用event.isImmediatePropagationStopped()方法来知道此方法是否已经（在事件对象上）被调用了。

补充说明：

  • 因为一旦事件委托到文档的顶部，.live()方法就会处理事件，所以它不能停止委托活动事件。类似的，由.delegate()方法处理的事件将把元素传播到事件被委托的元素；绑定在DOM树中它下面任何元素上的事件处理函数，将在委托事件处理函数被调用之前执先行。因此，这些处理函数，可以通过调用event.stopPropagation()或返回false来阻止被委托的处理函数。

示例：

阻止其它事件处理函数被调用。

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
37
38
39
40
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>paragraph</p>
<div>division</div>
 
<script>
$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});
</script>
 
</body>
</html>

演示：