同じ type_jquery のイベントを防ぐ jQuery の概要

コードをコピー コードは次のとおりです。 ; test > 🎜>&lt ;/html> 上記の HTML では、赤色の要素が緑色の要素の親要素です。 コードをコピー コードは次のとおりです。 $(function(){ $(" #green").click(function(event){ alert("green click1"); }); $("#green").click(function(event){ alert("green click2"); }); $("#red").click(function(event){ alert("red click"); } ); }); 上記の JS コードは、赤色の要素と緑色の要素に 3 つのクリック イベントを追加します。 サブ要素の緑色の要素をクリックすると、緑色のクリック1、緑色のクリック2、赤色のクリックイベントが順番に実行されます。 イベントの追加: 緑色の要素をクリックすると、緑色のクリック 1 と緑色のクリック 2 の 2 つのイベント (同じ要素上の同じ種類のイベント) が順番に実行されます。 イベントバブリング: 緑色の要素をクリックすると、親要素の赤色のクリックイベント (親要素と同じタイプのイベント) がトリガーされます。 1. 子要素のイベント関数でのイベントのバブリングを防ぐ 方法 1:event.stopPropagation() コードをコピー コードは次のとおりです: $(function(){ $("#green").click(function(event){ event.stopPropagation(); alert("緑のクリック"); }); $("#red").click(function(event){ alert("赤のクリック"); }) ; }); メソッド 2: false を返す コードをコピーします 次のように: $(function(){ $("#green").click(function(event){ alert("green click"); false を返します; }); $("#red").click(function(event){ alert("red click"); }); 上記の 2 つの方法により、サブ要素の緑色の領域をクリックした後、赤いクリック イベントがブロックされ、実行されなくなります。ただし、赤い要素の他の領域のクリックには影響しません。 この 2 つの違い: return false は、event.preventDefault()、event.stopPropagation() と同等です。 2. 親要素のイベント関数でのイベントのバブリングを防ぐ コードをコピーします コードは次のとおりです: $(function(){ $("#green").click(function(event){ alert("green click"); }); $(" #red").click(function(event){ if(event.target == this) { alert("red click"); } } ); }); クリックされたターゲット要素がそれ自体ではなくそのサブ要素であるかどうかを判断するには、if(event.target== this) を使用します。要素 緑色の要素、その後 no if 内のコードが実行されます。 3. イベントの追加を防止する 上記の方法では、イベントのバブリング (つまり、親要素上の同じタイプのイベント) のみを防止できますが、イベントの追加 (同じ要素上の同じタイプのイベント) は防止できません。 。 コードをコピー コードは次のとおりです。 $(function(){ $(" #green").click(function(event){ event.stopImmediatePropagation(); alert("green click"); }); ).click (function(){ alert("green click2"); }); }); event.stopImmediatePropagation() は、緑色の click2 イベントですが、イベントのバブルアップも防ぎます。