stopPropagationを使って親要素へイベントを伝えなくする
event.stopPropagation?
子要素から親要素へイベントが伝わるのを止めることができます。
例えば、次のような Parent要素 > Child要素な関係の場合。
See the Pen 20140813-1 by nju33 (@nju33) on CodePen.
Child要素をクリックした時に何かしたいと思っています。ですが、実際にクリックしてみると、child!の後にparent!と２回アラートが表示されてしまいます。
これは、Parent要素にもクリックした時にイベントが起きるようになっているからです。
「う～ん、どうしてもParent要素のイベントは起こしたくない。。」
そこで出番なのが、event.stopPropagationです。
伝播ストップ
Child要素がクリックされた時に、event.stopPropagationが実行されるよう改良しました。
See the Pen 20140813-2 by nju33 (@nju33) on CodePen.
実際にクリックしてみると、child!と１回しかアラートされないことが分かると思います！
Child要素でfalseに変えたのに、Parent要素でtrueに戻されちゃう。結果、「なんでぇぇ」みたいなことがたまにあるので覚えておきたいです。
