stopPropagationとstopImmediatePropagation

314

違いは何だevent.stopPropagation()とはevent.stopImmediatePropagation()？

javascript jquery

— アルジュン
ソース

321

stopPropagation任意防止する親実行されてからハンドラstopImmediatePropagation任意親ハンドラを防止するとともに、任意の他の実行からハンドラ

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

$("p").click(function(event) {
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

スニペットを展開

ここでは、イベントバインディングの順序が重要です。

コードスニペットを表示

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

スニペットを展開

— デイブ
ソース

1

あなたは「親」を強調しますが、実際には、捕獲段階で呼び出された場合、どちらも子供への侵入を停止します。詳細については、私の回答を参照してください。

— ロバートシーマー

57

これらの両方の伝播停止がどのように機能するかを示す小さな例。

コードスニペットを表示

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>

スニペットを展開

3つのイベントハンドラーがバインドされています。伝播を停止しない場合は、4つのアラート（子divに3つ、親divに1つ）があるはずです。

イベントの伝播を停止すると、3つのアラートが表示されます（すべて内部の子divで）。イベントはDOM階層を上に伝播しないため、親divはそれを認識せず、そのハンドラーは起動しません。

伝播をすぐに停止すると、アラートは1つだけになります。内部の子divに3つのイベントハンドラーがアタッチされている場合でも、1つだけが実行され、同じ要素内であっても、それ以降の伝播はすぐに中止されます。

— アヌラグ
ソース

どちらのstopPropagation()バリアントもDOM階層の下方への伝播を停止します。アップだけではありません。キャプチャフェーズの詳細については、私の回答を確認してください。

— Robert Siemer

26

jQuery APIから：

要素の追加のハンドラーが実行されないようにするだけでなく、このメソッドは、暗黙的にevent.stopPropagation（）を呼び出してバブリングを停止します。イベントが先祖要素にバブリングしないようにするだけで、他のイベントハンドラーが同じ要素で実行できるようにするには、代わりにevent.stopPropagation（）を使用できます。

event.isImmediatePropagationStopped（）を使用して、このメソッドが（そのイベントオブジェクトで）呼び出されたかどうかを確認します。

つまりevent.stopPropagation()、すべてのイベントが実行されるのをevent.stopImmediatePropagation()防ぎながら、同じ要素の他のハンドラを実行できるようにします。

— アロン・ロットビール
ソース

念のために言っておくと、ネイティブのJavaScriptバージョンのevent.stopImmediatePropagationは泡立つのを止めませんか？

— Alexander Derck

バブリングは、イベントが親要素に伝達されるときに発生し、イベントが伝達されstopImmediatePropagationないようにします。どちらもバブリングを防ぐ必要があります。最外部の要素を最初にトリガーするようにモードを変更してキャプチャすることもできます。その後、子のところまで行きます（バブルがデフォルトで、反対方向に動作します）

— JonnySerra

1

控えめに言っても正確ではありません。キャプチャ段階で停止すると、私の回答で説明されているように、同じ要素のバブルハンドラを実行できなくなります。

— Robert Siemer

23

event.stopPropagation親要素のハンドラが実行されないようにします。
呼び出すevent.stopImmediatePropagationと、同じ要素の他のハンドラーが実行されなくなります。

— SLaks
ソース

21

言及する価値があるのは、イベントハンドラーが要素にアタッチされた順序で実行されることです。

— Felix Kling、2011年

19

私は遅い方ですが、具体的な例を挙げれば、次のように言うことができます。

言ってやるが、あなたが持っている場合<table>で、<tr>その後、と<td>。ここで、<td>要素に3つのイベントハンドラーを設定したとします。event.stopPropagation()最初に設定したイベントハンドラーで設定した<td>場合、のすべてのイベントハンドラー<td>は引き続き実行されますが、イベントは伝達されません（<tr>または伝達され<table>ません）。上がるとまで<body>、<html>、document、およびwindow）。

さて、しかし、あなたが使用している場合event.stopImmediatePropagation()、その後、あなたの最初のイベントハンドラでのための他の2つのイベントハンドラ<td>WILL NOT実行を、とまで伝播しないだろう<tr>、<table>（と上がると、最大ではないだろう<body>、<html>、document、およびwindow）。

だけではないことに注意してください<td>。他の要素については、同じ原理に従います。

— 非極性
ソース

10

1）event.stopPropagation(): =>対応する親ハンドラの実行のみを停止するために使用されます。

2）event.stopImmediatePropagation(): =>対応する親ハンドラーの実行を停止するために使用されます。また、現在のハンドラー以外のハンドラーまたは関数自体に実行を停止します。=> DOM全体の現在の要素にアタッチされているすべてのハンドラーも停止します。

ここに例があります：Jsfiddle！

ありがとう、-Sahil

— サヒル・カシェトワール
ソース

3

event.stopPropagation（）は、同じ要素の他のハンドラーの実行を許可しますが、event.stopImmediatePropagation（）は、すべてのイベントの実行を防止します。たとえば、以下のjQueryコードブロックを参照してください。

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

前の例でevent.stopPropagationが使用された場合、CSSを変更するp要素の次のクリックイベントが発生しますが、event.stopImmediatePropagation（）の場合、次のpクリックイベントは発生しません。

— ラフルクマール
ソース

2

驚いたことに、他のすべての回答は真実の半分しか述べていないか、実際には間違っています！

e.stopImmediatePropagation() このイベントに対して、以降のハンドラーの呼び出しを停止します。例外はありません。
e.stopPropagation()似ていますが、まだ呼び出されていない場合は、この要素のこのフェーズのすべてのハンドラーを呼び出します

どのフェーズ？

たとえば、クリックイベントは常に最初にDOMの最下部まで行き（「キャプチャフェーズ」と呼ばれ）、最終的にイベントの起点に到達し（「ターゲットフェーズ」）、次に再びバブルアップします（「バブルフェーズ」）。また、addEventListener()キャプチャフェーズとバブルフェーズの両方のハンドラを個別に登録できます。（ターゲットフェーズは、区別せずにターゲット上で両方のタイプのハンドラーを呼び出します。）

そして、これは他の答えが間違っているものです：

quote：「event.stopPropagation（）を使用すると、同じ要素の他のハンドラーを実行できます」
修正：キャプチャフェーズで停止した場合、バブルフェーズハンドラーに到達することはなく、同じ要素でそれらをスキップします
quote：「event.stopPropagation（）[...]は、対応する親ハンドラーの実行のみを停止するために使用されます」
修正：キャプチャフェーズで停止した場合、親だけでなく、ターゲットを含むすべての子のハンドラーも呼び出されません。

_{フィドルとmozilla.org のイベントフェーズのデモと説明。}

— ロバート・シーマー
ソース

1

ここで、stopPropagationとstopImmediatePropagationのJSfiddleの例を追加します。 JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>

スニペットを展開

— アビラッシュ
ソース