7,796 views

この記事は最終更新から 1330日 が経過しています。

1. やりたいこと

ホームページを作成しているとき、divの中に inputを置くなど、
親要素と子要素
の関係を持つ要素を配置することがしばしばある。

例えば、親要素に JavaScriptの Clickイベントを処理させたいときに、以下のように書いたとする。

$('親要素').click(function(){
  // 何か処理する。
});

すると…
親要素をクリックした時だけイベントを処理させたい
のに
子要素をクリックした時でもイベントが発生してしまう。

https://www.dogrow.net/hp/sample/00101/index1.html

そこで…
子要素をクリック時には、親要素にイベントを処理させない
ようにする。

2. やってみる

(1) 方法1：子要素にイベントを無視＆消失させる。

子要素をクリックし、子要素にイベント通知された時点で、イベントを終了させてしまう。
イベントは、子要素から親要素へと遡上して伝播されるため、子要素でイベントの伝播を中断すれば、親要素はイベント発生を検知できないのだ。

具体的には、以下のように子要素のイベントハンドラで stopPropagation() と書き、イベントの伝播を抑止する。

参考情報： https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

$('親要素').click(function(){
  // 何か処理する。
});
$('子要素').click(function(event){
  event.stopPropagation();
});

これにより…
親要素をクリックしたときだけイベントを処理する
を実現できた。

https://www.dogrow.net/hp/sample/00101/index2.html

3. 所感

・もっとスマートな実現方法がありそうなので、引き続き調べてみよう。