JS バブリング メカニズムは、要素がクリック イベントなどのイベント A を定義し、イベントがトリガーされてバブリング イベントがブロックされていない場合、イベントが親要素に伝播し、親のクリック関数をトリガーすることを意味します。クラス。
次の例に示すように:
なし
中
inner
< div onclick="ialertdouble(event)">innerdouble
インナースリー
インナーフォー /p>
をクリックすると、「内側」が表示されます順番に「なし」でアップします。これがイベントバブリングです。
これも直感的には当てはまります。最も内側の領域が親ノード内にあるため、子ノードの領域をクリックすると実際には親ノードの領域をクリックするため、イベントが拡散します。 。
実際には、イベントがバブルアップすることを望まないことがよくあります。これは、同時に複数のイベントをトリガーすることになるためです。
次へ: innerdouble をクリックします。呼び出しメソッド ialertdouble() で stopBubble() メソッドを呼び出しているため、バブルが発生していないことがわかります。このメソッドはブラウザの種類 (つまり、cancleBubble() を使用し、Firefox は stopProgation() を使用します) を判断することでバブリングを防止します。
ただし、リンクの場合はバブリングは防止されますが、これはブラウザのデフォルトの動作です。これを防ぐには、preventDefault() メソッドを使用する必要があります。詳細については、ialertthree() を参照してください。
現在、jquery を使用してクリックイベントをバインドする方法が主流です。この場合、はるかに簡単になります。
イベントをクリックするときにパラメータ イベントを渡して、直接
event.stopPropagation();
event.preventDefault(); の場合は追加する必要はありません。リンクはありません。
以上です。
このフレームワークは優れていますが、実際にはイベント ハンドラーで false を返す、より簡単な方法があります。これは、イベント オブジェクトに対して stopPropagation() とPreventDefault() を同時に呼び出す簡単な方法です。
[上記の詳細なコードを参照してください。jquery.js をロードすることを忘れないでください。 ]
実際、各クリック イベントに判定を追加することもできます:
コードをコピー
})
分析: イベント ハンドラー内の変数イベントにはイベント オブジェクトが格納されます。 event.target 属性には、イベントが発生したターゲット要素が格納されます。この属性は DOM API で指定されていますが、すべてのブラウザーで実装されているわけではありません。 jQuery は、このプロパティをどのブラウザでも使用できるように、このイベント オブジェクトに必要な拡張を作成します。 .target を使用すると、最初にイベントを受信した DOM 内の要素 (つまり、実際にクリックされた要素) を特定できます。さらに、これがイベントを処理する DOM 要素を参照していることがわかっているため、上記のコードを書くことができます。
ただし、Jquery がイベントをバインドする場合は return false を使用することをお勧めします。