ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery はイベントのバブリングを停止します。event.stopPropagation_jquery

Jquery はイベントのバブリングを停止します。event.stopPropagation_jquery

WBOY
WBOYオリジナル
2016-05-16 17:58:321078ブラウズ

説明: イベントが DOM ツリーにバブルアップするのを防ぎます。つまり、先行要素のイベント ハンドラーがトリガーされません。

追加バージョン: 1.0
event.stopPropagation()
event.isPropagationStopped() を使用して、このメソッドが (そのイベント オブジェクト上で) 呼び出されたかどうかを判断できます。

このメソッドは、trigger() によってトリガーされるカスタム イベントにも有効です。

これによって、同じ要素上の他のイベント ハンドラーの実行が妨げられるわけではないことに注意してください。

追加メモ:
.live() メソッドはイベントがドキュメントの先頭に伝播すると処理するため、ライブ イベントの伝播を停止することはできません。同様に、.delegate() イベントは常に、含まれている委任された要素に伝播され、委任されたイベントが呼び出されたときに要素上のイベントが実行されます。
例:
クリック イベントのバブリングを停止します。

コードをコピー コードは次のとおりです。

$("p").click( function(event ){
event.stopPropagation();
// 何かをする
});


重要なことは記録することです予防イベントバブル。

div にはクリック イベントが追加されており、div 内の img にもクリック イベントが追加されているため、img がクリックされると、最初に img の click イベントがトリガーされ、次にクリックがトリガーされます。 div 上のイベントがトリガーされます。これはイベントバブリングです。

Jquery で彼を簡単に止めることができます。

次のように

コードをコピーします コードは次のとおりです:
event.stopPropagation() ;

このようにすると、画像をクリックしても div のクリック イベントがトリガーされなくなります

コードをコピー コードは次のとおりです:

$('div').click(function(){
var $div = $(this);
if($div.find(' img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('').
appendTo($(this)).click(function) (イベント){
$div .css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation(); ('margin-left','10px ')
}
});
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。