バブリング イベントは子ノードをクリックすることであり、イベントは上方に渡され、最後に親ノードと祖先ノードのクリック イベントがトリガーされます。
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);
});
})
この種のバブルイベントの発生を防ぐにはどうすればよいでしょうか?次のように変更します:
内側の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);
});
})
テキスト ボックスの値を空にすることはできません。
"); //プロンプト メッセージ
テキスト ボックスの値を空にすることはできません。
");内側の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);
});
})