<div class="codetitle"> <span><a style="CURSOR: pointer" data="49473" class="copybut" id="copybut49473" onclick="doCopy('code49473')"><u>コードをコピー</u></a></span> コードは次のとおりです。</div> <div class="codebody" id="code49473"> <br><!DOCTYPE HTML> <br><html> ; <br><head> <br><title>test</title> <br><script src="http://code.jquery.com/jquery-1.9.1.min.js" ;</script> <br><body> <br> >< div style="height:200px;background-color:green;" id="green"> <br></body> 🎜>< ;/html> <br><br> <br>上記の HTML では、赤色の要素が緑色の要素の親要素です。 <br><br><br> </div> <br>コードをコピー<br><div class="codetitle"> <span> コードは次のとおりです。<a style="CURSOR: pointer" data="41187" class="copybut" id="copybut41187" onclick="doCopy('code41187')"><u> </u>$(function(){ </a> $(" #green").click(function(event){ </span>alert("green click1"); </div>}); <div class="codebody" id="code41187">$("#green").click(function(event){ <br>alert("green click2"); <br>}); <br>$("#red").click(function(event){ <br>alert("red click"); <br>} ); <br>}); <br><br> <br>上記の JS コードは、赤色の要素と緑色の要素に 3 つのクリック イベントを追加します。 <br>サブ要素の緑色の要素をクリックすると、緑色のクリック1、緑色のクリック2、赤色のクリックイベントが順番に実行されます。 <br>イベントの追加: 緑色の要素をクリックすると、緑色のクリック 1 と緑色のクリック 2 の 2 つのイベント (同じ要素上の同じ種類のイベント) が順番に実行されます。 <br>イベントバブリング: 緑色の要素をクリックすると、親要素の赤色のクリックイベント (親要素と同じタイプのイベント) がトリガーされます。 </div>1. 子要素のイベント関数でのイベントのバブリングを防ぐ <br>方法 1:event.stopPropagation() <br><br><br><br><br>コードをコピー <br><div class="codetitle"> <span> コードは次のとおりです: <a style="CURSOR: pointer" data="19160" class="copybut" id="copybut19160" onclick="doCopy('code19160')"><u> </u>$(function(){ </a>$("#green").click(function(event){ </span>event.stopPropagation(); </div>alert("緑のクリック"); <div class="codebody" id="code19160">}); <br>$("#red").click(function(event){ <br>alert("赤のクリック"); <br>}) ; <br>}); <br><br> <br>メソッド 2: false を返す <br><br><br> </div> <br> コードをコピーします<br><div class="codetitle"> <span>次のように:<a style="CURSOR: pointer" data="58681" class="copybut" id="copybut58681" onclick="doCopy('code58681')"><u> </u>$(function(){ </a>$("#green").click(function(event){ </span>alert("green click"); </div> false を返します; <div class="codebody" id="code58681">}); <br>$("#red").click(function(event){ <br>alert("red click"); <br>}); <br><br> <br>上記の 2 つの方法により、サブ要素の緑色の領域をクリックした後、赤いクリック イベントがブロックされ、実行されなくなります。ただし、赤い要素の他の領域のクリックには影響しません。 <br>この 2 つの違い: <br>return false は、event.preventDefault()、event.stopPropagation() と同等です。 <br>2. 親要素のイベント関数でのイベントのバブリングを防ぐ <br> </div> <br><br><br> コードをコピーします <br><br><div class="codetitle"> コードは次のとおりです: <span> <a style="CURSOR: pointer" data="40119" class="copybut" id="copybut40119" onclick="doCopy('code40119')"> <u>$(function(){ </u>$("#green").click(function(event){ </a>alert("green click"); </span>}); </div> $(" #red").click(function(event){ <div class="codebody" id="code40119">if(event.target == this) <br>{ <br>alert("red click"); <br>} <br>} ); <br>}); <br><br> <br>クリックされたターゲット要素がそれ自体ではなくそのサブ要素であるかどうかを判断するには、if(event.target== this) を使用します。要素 緑色の要素、その後 no if 内のコードが実行されます。 <br>3. イベントの追加を防止する <br>上記の方法では、イベントのバブリング (つまり、親要素上の同じタイプのイベント) のみを防止できますが、イベントの追加 (同じ要素上の同じタイプのイベント) は防止できません。 。 <br><br> </div> <br><br>コードをコピー<br><br><div class="codetitle"> コードは次のとおりです。<span><a style="CURSOR: pointer" data="22365" class="copybut" id="copybut22365" onclick="doCopy('code22365')"> <u>$(function(){ </u> $(" #green").click(function(event){ </a>event.stopImmediatePropagation(); </span>alert("green click"); </div>}); ).click (function(){ <div class="codebody" id="code22365">alert("green click2"); <br>}); <br>}); <br><br> <br>event.stopImmediatePropagation() は、緑色の click2 イベントですが、イベントのバブルアップも防ぎます。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
