javascriptイベントの伝播

Posted on by 股下ニッパチ

こんにちは。ニッパチです。
最近みりんの優秀さに気づき、色んな料理にかけまくってます。
醤油とみりんをかけとけばとりあえずなんでもおいしくなると思います。

今回はjavascriptのイベント伝播について書いていきます。

クリックイベントの挙動を確認

イベントの伝播とは子要素から親要素へイベントが広がっていくというものです。
以下のソースでボタンをクリックすると実行結果はどうなると思いますか？

<!DOCTYPE html>
<html>
  <body>
    <div class="element-1">
      <div class="element-2">
        <button type="button" class="element-3">button</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(function() {
      $('.element-1').on('click', (e) => {
        console.log('element-1 clicked')
      })
      $('.element-2').on('click', (e) => {
        console.log('element-2 clicked')
      })
      $('.element-3').on('click', (e) => {
        console.log('element-3 clicked')
      })
    })
  </script>
</html>

ボタンクリックの出力結果
element-3 clicked
element-2 clicked
element-1 clicked

結果はすべてのクリックイベントが発火しました。
これがイベントの伝播です。

伝播をとめる

なんか上記の結果気持ち悪いですね。
直感的にはボタンをクリックしただけなのでelement-3のイベントだけ発火するものだと思ってしまいます。
詳しいことはよくわかってません（笑）
伝播をとめるには以下の一行を追加するとできます。

<!DOCTYPE html>
<html>
  <body>
    <div class="element-1">
      <div class="element-2">
        <button type="button" class="element-3">button</button>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $(function() {
      $('.element-1').on('click', (e) => {
        console.log('element-1 clicked')
      })
      $('.element-2').on('click', (e) => {
        console.log('element-2 clicked')
      })
      $('.element-3').on('click', (e) => {
        console.log('element-3 clicked')
        e.stopPropagation();  <-------追加
      })
    })
  </script>
</html>

ボタンクリックの出力結果
element-3 clicked

以上です。