どうも中田です

いつも忘れちゃうんですよ。
javascriptのイベントバブリング制御。
いい加減調べずにパッと書けるようになっておきたい。

イベントバブリングとは

親子構造になったHTML要素があって、子要素に対しクリックしたイベントが親要素に伝わること

例えば、下記のような場合childのhtml要素をクリックした場合、
childのclickイベントはもちろんですが、parentのclickイベントまで動作しちゃいます
「I’m child」と「I’m parent」が両方コンソールに出ちゃう感じですね

<div class="parent">
  <div class="child">
  </div>
</div>

<script>
  $("parent").on("click", () => {
    console.log("I'm parent");
  });
  
  $("child").on("click", () => {
    console.log("I'm child");
  });
</script>

その親要素へのクリックイベントの伝搬を抑止するために、return false やら preventDefault やら stopPropagation をchildのclickイベント内に書きます。

ここからは多分私の英語力の問題だと思うんですが、
preventDefault と stopPropagation のどっちがどっちか。。
なので、意味をちゃんと理解しようかと。

prevent

意味: 防ぐ
preventDefault: 備え付け機能を無効にする

自身のタグの機能を無効にするってことは
aタグとかのclickイベントに記載したら、画面遷移はしないけど、
親への伝搬はするってことになります

propagation

意味: 伝搬
stopPropagation: 伝搬するのをやめる

自身のイベントを実行して親への伝搬はしないってことは
aタグとかのclickイベントに記載したら、画面遷移はするけど、
親への伝搬はしないということになります

…ゆえに〜こういうまとめになる↓↓↓

イベントバブリングのまとめ

	return false	preventDefault	stopPropagation	記載なし
自身のevent処理	×	×	○	○
親伝搬	×	○	×	○

よし、ここにアウトプットしたからもう忘れない。(はず！)