DOM

：

：

Event.stopPropagation() メソッド

　編集：2022.09.17 by T.A.

[Edge]。→、

Event と同じタイプのイベントのキャプチャリングまたはバブリング（浮上）の過程におけるこれ以上の伝播を抑止します。

ただし、デフォルトの動作の発生を防ぐことはできません。例えば、リンクのクリックはまだ処理されています。これらの動作を停止したい場合は、preventDefault() メソッドを参照してください。

構文
Event.stopPropagation()
Event イベント オブジェクト（¶Event、MouseEvent、…）。
戻り値

undefined。

例
このメソッドと DOM におけるイベントの伝播のより詳しい例については、 を参照してください

HTML： 

<DIV id=IdDiv>[DIV要素。ここでクリック
  <SPAN id=IdSpan>[SPAN要素。ここでクリック]</SPAN>
  終わり]
</DIV>

JavaScript： 

function Job1(eve){
  let Y=eve.target;
  alert("Job1：" + Y.tagName +"："+ eve.eventPhase);
  eve.stopPropagation();
}
function Job2(eve){
  let Y=eve.target;
  alert("Job2：" + Y.tagName +"："+ eve.eventPhase);
}
IdDiv.addEventListener('click', Job1, true);
IdSpan.addEventListener('click', Job2, true);

eve.stopPropagation()が無い場合にSPAN要素でクリックすると表示は「Job1：SPAN：1」、次に「Job2：SPAN：2」ですが、

eve.stopPropagation()が有ると表示は「Job1：SPAN：1」だけですね。

→eventPhase、addEventListener。

テスト