☰

event.stopPropagation と event.preventDefault の違いは何ですか? 質問する

tag-icon • tag-icon javascript events preventdefault stoppropagation
event.stopPropagation と event.preventDefault の違いは何ですか? 質問する

同じことをしているようです...
1 つは最新で、もう 1 つは古いですか? それとも、異なるブラウザーでサポートされているのでしょうか?

フレームワークなしで自分でイベントを処理するときは、常に両方をチェックし、存在する場合は両方を実行します。( も使用していますreturn falseが、 が添付されたイベントでは動作しないような気がしますnode.addEventListener)。

では、なぜ両方なのでしょうか? 両方をチェックし続けるべきでしょうか? それとも、実際に違いがあるのでしょうか?

(質問がたくさんあるのはわかっていますが、どれも似たようなものです =))

ベストアンサー1

stopPropagationキャプチャフェーズとバブリングフェーズで現在のイベントがさらに伝播するのを防ぎます。

preventDefaultブラウザがそのイベントで実行するデフォルトのアクションを防止します。

例

デフォルトを防止

$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

伝播を停止する

$("#but").click(function (event) {
  event.stopPropagation()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

を使用すると、のクリック ハンドラstopPropagationのみが呼び出され、のクリック ハンドラは起動されません。buttondiv

一方、 を使用するとpreventDefault、ブラウザのデフォルトのアクションのみが停止されますが、div のクリック ハンドラは引き続き実行されます。

以下は、MDN の DOM イベント プロパティとメソッドに関するドキュメントです。

IE9 および FF の場合は、preventDefault と stopPropagation を使用できます。

IE8以下をサポートするには、を次stopPropagationのように置き換え、を次のようにcancelBubble置き換えます。preventDefaultreturnValue

おすすめ記事