アフィリエイト広告を利用しています

広告

posted by fanblog

2016年09月06日

【jQuery】子要素イベントの後、親イベントを発生させないようにする

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

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

例)

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

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



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

posted by newprogramer at 15:50| Comment(0) | TrackBack(0) | jQuery
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/5397549
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
検索
カテゴリーアーカイブ

最新記事
×

この広告は30日以上新しい記事の更新がないブログに表示されております。