ホームページ >ウェブフロントエンド >jsチュートリアル >イベントbubble_jqueryを防止するjQueryの特定の実装

イベントbubble_jqueryを防止するjQueryの特定の実装

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 17:20:231135ブラウズ

以下は HTML コード部分です:

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



外側の div 要素
内側のspan要素
外側のdiv要素



に対応する jQuery コードは次のとおりです:

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

この種のバブルイベントの発生を防ぐにはどうすればよいでしょうか?

次のように変更します:

コードをコピー

// クリック イベントをスパン要素にバインドします
$('span').bind("click",function(event){
var txt = $( '#msg').html() "

内側のspan要素をクリックしました。

";
$('#msg').html(txt);
event.stopPropagation(); // イベントのバブリングを停止します
});
// クリック イベントを div 要素にバインドします
$('#content').bind("click",function(event){
var txt = $('#msg').html() "

外側の div 要素をクリックしました。

";
var txt = $('#msg') .html( txt);
event.stopPropagation(); // イベントのバブリングを防止します
});
// クリックイベントを body 要素にバインドします
$("body").bind(" click ",function(){
var txt = $('#msg').html() "

body 要素をクリックしました。

";
var txt = $ ('#msg').html() ).html(txt);
});
})




event.stopPropagation(); // イベントのバブリングを停止します
送信ボタンをクリックすると、デフォルトのイベントが発生する場合があります。たとえば、別のインターフェイスにジャンプします。ただし、検証に合格しない場合は、ジャンプしないでください。この時点で、event.preventDefault(); //デフォルトの動作(フォーム送信)を防止できます。

次のようなケースがあります:

コードをコピー

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



html 部分:

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


ユーザー名:






デフォルトの動作を防ぐもう 1 つの方法は、false を返すことです。効果も同様です。

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

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

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

;
});
// クリック イベントをバインドしますdiv 要素
$('#content').bind("click",function(event){
var txt = $(' #msg').html() "

外側の div 要素

";

});
// クリック イベントを body 要素にバインドします
$("body").bind("click",function (){
var txt = $('#msg' ).html() "

body 要素をクリックしました。

";




声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。