2016年09月06日
【jQuery】子要素イベントの後、親イベントを発生させないようにする
Jqueryのクリックイベントでクリックした要素のイベントだけを発生させたいのですが、
子要素をクリックした際、Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。
この現象を「イベントバブリング」といいます。jQueryの仕様です。
子を包含している親要素が対象となります。
そこで、親のイベントを発生させない方法として、
クリックしたイベントオブジェクトの「stopPropagation」を使用します。
以上で、クリックした子要素のみのイベント発生、
親へのバブリングを止めることができます。
子要素をクリックした際、Jqueryでのイベント作成では、イベントは子から親要素へ伝わる仕様となっております。
この現象を「イベントバブリング」といいます。jQueryの仕様です。
子を包含している親要素が対象となります。
そこで、親のイベントを発生させない方法として、
クリックしたイベントオブジェクトの「stopPropagation」を使用します。
例)
$('div').bind('click',function(e){
alert("親要素");
});
$('div :input').bind('click',function(e){
alert("子要素");
e.stopPropagation(); ←バブリング停止
});
以上で、クリックした子要素のみのイベント発生、
親へのバブリングを止めることができます。
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/5397549
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック