(101) 親要素だけにイベントを処理させたい。

投稿者: | 2021年3月4日

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. 所感

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)