Jsバブリングイベントの詳細説明とブロック例_javascriptスキル

JS バブリング メカニズムは、要素がクリック イベントなどのイベント A を定義し、イベントがトリガーされてバブリング イベントがブロックされていない場合、イベントが親要素に伝播し、親のクリック関数をトリガーすることを意味します。クラス。 次の例に示すように:

コードをコピーします コードは次のとおりです: 関数 ialertdouble( e) { アラート('innerdouble'); stopBubble(e) }

関数 ialertthree(e) { alert('innerthree'); stopBubbleDouble(e); }

function stopBubble(e) { var evt = e||window.event; evt.stopPropagation?evt.stopPropagation():(evt. cancelBubble=true);/ /バブリングを停止 }

function stopBubbleDouble(e) { var evt = e||window.event evt.stopPropagation?evt.stopPropagation() :(evt.cancelBubble =true);//バブリングを防止します evt.preventDefault();//リンクがジャンプしないようにブラウザのデフォルト動作を防止します }

$(function( ) { //メソッド 1 //$('#jquerytest').click(function(event) { //alert('innerfour'); //event.stopPropagation( ); //event.preventDefault();

//メソッド 2 $('#jquerytest').click(function() { alert( 'innerfour');

}); なし 中 inner innerdouble インナースリー

インナーフォー /p>

をクリックすると、「内側」が表示されます順番に「なし」でアップします。これがイベントバブリングです。

これも直感的には当てはまります。最も内側の領域が親ノード内にあるため、子ノードの領域をクリックすると実際には親ノードの領域をクリックするため、イベントが拡散します。 。

実際には、イベントがバブルアップすることを望まないことがよくあります。これは、同時に複数のイベントをトリガーすることになるためです。 次へ: innerdouble をクリックします。呼び出しメソッド ialertdouble() で stopBubble() メソッドを呼び出しているため、バブルが発生していないことがわかります。このメソッドはブラウザの種類 (つまり、cancleBubble() を使用し、Firefox は stopProgation() を使用します) を判断することでバブリングを防止します。

ただし、リンクの場合はバブリングは防止されますが、これはブラウザのデフォルトの動作です。これを防ぐには、preventDefault() メソッドを使用する必要があります。詳細については、ialertthree() を参照してください。

現在、jquery を使用してクリックイベントをバインドする方法が主流です。この場合、はるかに簡単になります。

イベントをクリックするときにパラメータ イベントを渡して、直接

event.stopPropagation(); event.preventDefault(); の場合は追加する必要はありません。リンクはありません。

以上です。

このフレームワークは優れていますが、実際にはイベント ハンドラーで false を返す、より簡単な方法があります。これは、イベント オブジェクトに対して stopPropagation() とPreventDefault() を同時に呼び出す簡単な方法です。 [上記の詳細なコードを参照してください。jquery.js をロードすることを忘れないでください。 ]

実際、各クリック イベントに判定を追加することもできます:

コードをコピー

コードは次のとおりです。以下: $('#id').click(function(event){ if(event.target==this){ //何かをする } })

分析: イベント ハンドラー内の変数イベントにはイベント オブジェクトが格納されます。 event.target 属性には、イベントが発生したターゲット要素が格納されます。この属性は DOM API で指定されていますが、すべてのブラウザーで実装されているわけではありません。 jQuery は、このプロパティをどのブラウザでも使用できるように、このイベント オブジェクトに必要な拡張を作成します。 .target を使用すると、最初にイベントを受信した DOM 内の要素 (つまり、実際にクリックされた要素) を特定できます。さらに、これがイベントを処理する DOM 要素を参照していることがわかっているため、上記のコードを書くことができます。

ただし、Jquery がイベントをバインドする場合は return false を使用することをお勧めします。