JavaScript および jquery イベントのイベント バブリングとイベント キャプチャには問題があります。この 2 つの問題とその解決策については、以下に詳しくまとめています。 イベント バブリングは子ノードから祖先ノードへのバブリングのプロセスです。イベント キャプチャはその逆で、祖先ノードから子ノードへのプロセスです。 jquery クリック イベントの例を示します: コードは次のとおりです: コードをコピー コードは次のとおりです: test > <br>$(function(){ <br>$('#clickMe').click(function(){ <br>alert('hello'); <br>}); <br>$('ボディ').click(function(){ <br>alert('baby'); <br>}); ><body> ; <BR><div style="width:100px;height:100px;background-color:red;"><br><button type="button" id="button2">私</ボタン> <br><ボタンid="clickMe"><br></body> <br> <br> <br>イベントバブリング現象: 「id=clickMe」のボタンをクリックすると、「hello」と「baby」の2つのポップアップボックスが連続して表示されます。 <br><br>分析: "id=clickMe" のボタンがクリックされると、ボタン、ボタンの親要素、本体にバインドされたクリック イベントがトリガーされるため、2 つのボックスが次々にポップアップし、いわゆる泡立つ現象。 <br><br><br>イベントキャプチャ現象: クリックイベントがバインドされていない div および "id=button2" のボタンをクリックすると、"baby" ダイアログ ボックスがポップアップ表示されます。 <br> </div> <br>実際のプロジェクトでは、イベントのバブリングとイベントのキャプチャを防ぐ必要があります。 <br><br>イベントのバブリングを防ぐメソッド: <br><br>方法 1: 現在のクリック イベントで false を返す <br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです:<br><div class="codetitle"> <span>$('#clickMe').click(function(){ <a style="CURSOR: pointer" data="39946" class="copybut" id="copybut39946" onclick="doCopy('code39946')">alert('hello'); <u></u> return false; </a>}); </span> </div> <div class="codebody" id="code39946">方法 2: <br><br><br><br><br> コードをコピーします<br> </div> <br>次のように: <br><div class="codetitle"> <span>$('#clickMe').click(function(event){ <a style="CURSOR: pointer" data="17920" class="copybut" id="copybut17920" onclick="doCopy('code17920')">alert('hello'); <u></u>var e = window.event | |event; </a></span>if ( e.stopPropagation ){ //イベント オブジェクトが提供される場合、これは非 IE ブラウザです。</div>e.stopPropagation()else{ <div class="codebody" id="code17920"> //IE互換の方法 キャンセルイベントバブリング <br>window.event.cancelBubble = true; <br><br> <br>イベントのキャプチャはブロックできないようです</div>