jQueryでonがイベントをバインドした後に発生したイベントバブル問題をどのように解決するか

onバインドでは、サブエレメントをdocumentにバインドし、親エレメントを親エレメントにバインドすると、return falseがバブルを無効にします.

 
 
 
 
 
 
$(function () { 
$(document).on("click","#p1",function(e){ 
console.log(e.target.tagName); 
console.log("p1    "); 
//e.stopPropagation(); //        
return false; 
}) 
$("#aa").on("click","#td1",function(e){ 
console.log(e.target.tagName); 
console.log("td1    "); 
}) 
$("#aa").on("click","#tr1",function(e){ 
console.log(e.target.tagName); 
console.log("tr1    "); 
}) 
$("#aa").on("click","#table1",function(e){ 
console.log(e.target.tagName); 
console.log("table1    "); 
}) 
}); 
 
 
 

段落
こんにちは
onメソッドはclickなどのイベントをdocumentオブジェクトにバインドし、ページ上の任意の要素で発生したclickイベントがdocumentオブジェクトにバブルして処理されます.
バインド効率が向上しました.イベントがdocumentオブジェクトにバブルすると、イベントのtargetが検出され、入力されたセレクタ(ここではbutton)と一致すると、イベントがトリガーされます.そうしないとトリガーされません.
統一バインドオブジェクトに変更すると解決し,onメソッドのバインドメカニズムの問題に起因すると初歩的に考えられる.
だからreturn falseは無効です.子要素と親要素が同じバインド要素に変更された後、問題が解決します.

 
 
 
 
 
 
$(function () { 
$("#aa").on("click","#p1",function(e){ 
console.log(e.target.tagName); 
console.log("p1    "); 
//e.stopPropagation(); //        
return false; 
}) 
$("#aa").on("click","#td1",function(e){ 
console.log(e.target.tagName); 
console.log("td1    "); 
}) 
$("#aa").on("click","#tr1",function(e){ 
console.log(e.target.tagName); 
console.log("tr1    "); 
}) 
$("#aa").on("click","#table1",function(e){ 
console.log(e.target.tagName); 
console.log("table1    "); 
}) 
}); 
 
 
 

段落
こんにちは
以上、jQueryでonがイベントをバインドした後に起こるイベントバブルの問題と解決策を紹介しましたが、皆さんのお役に立てばと思います!