1. やりたいこと

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

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

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

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

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

2. やってみる

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

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

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

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

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