[解決済み】event.stopPropagationとevent.preventDefaultの違いは何ですか？

質問

同じことをしているように見えるのですが・・・。
片方はモダン、片方はオールドなのでしょうか？それとも、それぞれ対応するブラウザが違うのでしょうか？

私が自分でイベントを処理するとき（フレームワークなし）、私は常に両方をチェックし、存在する場合は両方を実行するだけです。(私はまた return false でくくられたイベントには効かない気がします。 node.addEventListener ).

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

(質問が多いですが、どれも同じようなものです =))

どのように解決するのですか？

stopPropagation は、捕捉およびバブリングフェーズにおいて、現在のイベントがさらに伝播することを防ぎます。

preventDefault は、そのイベントに対してブラウザが行うデフォルトのアクションを防止します。

例

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>

stopPropagation

$("#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 のみです。 button のクリックハンドラ が呼び出される一方で div のクリックハンドラ は決して起動しません。

を使用する場合は preventDefault ブラウザのデフォルトのアクションが停止されるだけで、div のクリックハンドラはまだ実行されます。

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

• event.cancelBubble
• event.preventDefault()
• event.returnValue
• event.stopPropagation()

IE9とFFでは、preventDefault & stopPropagationを使用すればよいでしょう。

IE8以下に対応するには、以下のように置き換えます。 stopPropagation を cancelBubble を置き換えると preventDefault を returnValue