このテクニック地味ですが、思い出せなくて何度もググるのでここでまとめておきます。
すごく単純なんですけどね。。。。
対象となる問題
まず、タイトルにある「親要素へのイベント伝搬」とはなんぞや？というところに触れておきます。
下の画像右下にあるHTMLのイメージで、DIVの中にある子要素であるボタンをクリックすると、親要素であるDIVに定義されているクリックイベントも発火してしまうというのが今回のテーマです。ボタンをクリックしたらボタンのイベントだけを発火したいのに、DIVのクリックイベントまで発火してしまうというところを何とかしたい←言い換えても同じ
勿体ぶってもしかたないので、結論いきましょう
ズバリ stopPropagation を使う
ソースにちょこっと変更を加えることで、子要素のイベント発火時に親への伝搬をブロックできます。
ポイントは、キャプチャ画像の左下にあるjsの記述。
childに対してのclickイベント処理で、 e.stopPropagation(); を追記しています。
※この時、 function(e) の “e” を忘れないように。
propagation の直訳が 伝搬 なので、ここで「伝搬を止めるよ」という宣言になります。
そもそも。。。
親要素と子要素にそれぞれ別のイベント処理が定義されるような設計は避けるべきかもしれませんね。
ユーザの操作ミスも誘発しそう。やむを得ずこういった構成になったと時に活用するレアな存在でいてほしい。
あと、話ぶっ飛ぶけど
伝搬ってキーワードで調べる人いるのかな？
「イベント 継承」とか「親 イベント」っていうキーワードで検索してたから、なかなか答えに辿り着かなかった。。。
って書きながら、継承だと逆か。。って一人でツッコミたくなった。。orz
では、また！
