なんちゃってプログラマのぼやき

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

Jqueryのクリックイベントでクリックした要素のイベントだけを発生させたいのですが、
子要素をクリックした際、Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。
この現象を「イベントバブリング」といいます。jQueryの仕様です。
子を包含している親要素が対象となります。

そこで、親のイベントを発生させない方法として、
クリックしたイベントオブジェクトの「stopPropagation」を使用します。

例）

$('div').bind('click',function(e){
alert("親要素");
});

$('div :input').bind('click',function(e){
alert("子要素");
e.stopPropagation();　←バブリング停止
});

以上で、クリックした子要素のみのイベント発生、
親へのバブリングを止めることができます。