jQuery はどのようにしてこのバブルイベントの発生を防ぐのでしょうか_jquery

バブリング イベントは子ノードをクリックすることであり、イベントは上方に渡され、最後に親ノードと祖先ノードのクリック イベントがトリガーされます。

HTML コード部分:

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

外側の div 要素
                                                                                                                                        外側の div 要素

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

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

<スクリプトタイプ="text/javascript">
$(関数(){
$('span').bind("クリック",function(){
var txt = $('#msg').html() "

内側のspan要素がクリックされました

";
$('#msg').html(txt);
});
$('#content').bind("クリック",function(){
var txt = $('#msg').html() "

外側の div 要素がクリックされました

";
$('#msg').html(txt);
});
$("body").bind("click",function(){
var txt = $('#msg').html() "

body要素がクリックされました

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

スパンをクリックすると、div と body のクリック イベントがトリガーされます。 divをクリックするとbodyのクリックイベントがトリガーされます。

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

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

<スクリプトタイプ="text/javascript">
$(関数(){
$('span').bind("クリック",function(event){
var txt = $('#msg').html() "

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

";
$('#msg').html(txt);
event.stopPropagation(); even.stopPropagation();イベントのバブリングを停止
});
$('#content').bind("クリック",function(event){
var txt = $('#msg').html() "

外側の div 要素がクリックされました

";
$('#msg').html(txt);
event.stopPropagation(); even.stopPropagation();イベントのバブリングを停止
});
$("body").bind("click",function(){
var txt = $('#msg').html() "

body要素がクリックされました

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

送信ボタンをクリックすると、デフォルトのイベントが発生する場合があります。たとえば、別のインターフェイスにジャンプします。ただし、検証に合格しない場合は、ジャンプしないでください。このとき、event.preventDefault(); を設定することでデフォルトの動作を防ぐことができます。以下はケースです:

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

<スクリプトタイプ="text/javascript">
$(関数(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); // 要素の値を取得します。val() メソッドは、選択された要素の値を返すか、設定します。
if（username == ""）{。 $("#msg").html("

テキスト ボックスの値を空にすることはできません。

"); //プロンプト メッセージ
event.preventDefault() // デフォルトの動作を防止します (フォーム送信)
}
})
})

html 部分:

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

ユーザー名:

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

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

<スクリプトタイプ="text/javascript">
$(関数(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); if( ユーザー名 == "" ){
$("#msg").html("

テキスト ボックスの値を空にすることはできません。

");
return false;
}
})
})

同様に、上記のバブリングイベントも false を返すことで処理できます。

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

<スクリプトタイプ="text/javascript">

$(関数(){
$('span').bind("クリック",function(event){
var txt = $('#msg').html() "

内側のspan要素がクリックされました

";
$('#msg').html(txt);
return false;
});
$('#content').bind("クリック",function(event){
var txt = $('#msg').html() "

外側の div 要素がクリックされました

";
$('#msg').html(txt);
return false;
});
$("body").bind("click",function(){
var txt = $('#msg').html() "

body要素がクリックされました

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

jQuery には、DOM イベントをトリガーするためのバブリング機能があります。この機能を利用するとコードの重複を減らすことができる場合もありますが、イベントがバブルアップしたくない場合もあります。このとき、jQuery.Eventがバブリングしないようにする必要があります。