jqueryでonでイベントをバインドした後のイベントバブル問題について

2899 ワード

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    ");
            	})
           

        });