【JavaScript】子要素クリック時に親要素のイベントを実行させない方法

JavaScriptを触っていて困った現象があり、その対策を探すためにたくさんググったため、備忘録として記事を書きます。

具体的には伝播やバブリングと呼ばれる現象に悩みました。子要素のクリック時に親要素にも伝わり、親要素のクリックイベントも実行されてしまう現象です。

現象

子要素、親要素それぞれにクリックイベントがある場合

See the Pen 両要素実行 by ttt92 (@ttt92) on CodePen.

このように子要素をクリックすると子要素のイベントだけでなく親要素のイベントも実行されます。（伝播されます。）

親要素にのみクリックイベントがある場合

See the Pen 親要素のみイベントがある by ttt92 (@ttt92) on CodePen.

先ほどと同様、親要素のクリック時だけでなく子要素のクリック時にも親要素のイベントが実行されます。

解決策

子要素のクリック時に親要素のイベントを実行させない方法

See the Pen Untitled by ttt92 (@ttt92) on CodePen.

解決策としては、子要素のクリックイベントのファンクション内でstopPropagation()メソッドを使うことです。

これにより、子要素のクリック時には子要素のイベントだけ実行され、親要素のクリック時のみ親要素のイベントが実行されます。

子要素のクリック時に何も実行させない方法

See the Pen 親要素のクリック時のみ実行 by ttt92 (@ttt92) on CodePen.

stopPropagationを使った上のコードを少し変えるだけで（子要素のイベントを消去しただけ）親要素のクリック時のみイベントが実行され、子要素のクリック時には何も起きないようにすることができます。

【参考】pointer-eventsでできること

See the Pen pointer-events by ttt92 (@ttt92) on CodePen.

CSSでpointer-eventsを設定することでも挙動を変えることができます。この例では親要素にはpointer-eventsをnoneに設定し、子要素をautoにしています。こうすることで、親要素をクリックしても何も実行されず、子要素のクリック時に親要素のイベントが実行させることができます。