以下は HTML コード部分です: コードをコピー コードは次のとおりです。 < div id= "content"> 外側の div 要素 内側のspan要素 外側のdiv要素 に対応する jQuery コードは次のとおりです: コードをコピー コードは次のとおりです: <br>$(function(){<br> // クリック イベントをスパン要素にバインドします <br> $('span').bind("click",function(){<br> var txt = $ (' #msg').html() "<p>内側のspan要素をクリックしました。<p/>";//HTML情報を取得<br> $('#msg').html(txt) ;/ / HTML 情報を設定 <br> });<br> // div 要素のクリック イベントをバインド <br> $('#content').bind("click",function(){<br> var txt = $ ('#msg').html() "<p>外側の div 要素をクリックしました。<p/>";<br> );<br> // クリック イベントを body 要素にバインドします <br> $("body").bind("click",function(){<br> var txt = $('#msg').html( ) "<p>body 要素がクリックされました。<p /＆gt; ";<br>;/script＆gt; <br> <br> <br> <br>スパンをクリックすると、div と body のクリック イベントがトリガーされます。 divをクリックするとbodyのクリックイベントがトリガーされます。 <br> </div>この種のバブルイベントの発生を防ぐにはどうすればよいでしょうか? <p>次のように変更します: </p> <p></p> <p></p> <p>コードをコピー</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="9950" class="copybut" id="copybut9950" onclick="doCopy('code9950')"> コードは次のとおりです:<u></u></a><script type="text/javascript "> </span>$(function(){</div> // クリック イベントをスパン要素にバインドします <div class="codebody" id="code9950"> $('span').bind("click",function(event){<br> var txt = $( '#msg').html() "<p>内側のspan要素をクリックしました。<p/>";<br> $('#msg').html(txt);<br> event.stopPropagation(); // イベントのバブリングを停止します <br> });<br> // クリック イベントを div 要素にバインドします <br> $('#content').bind("click",function(event){ <br> var txt = $('#msg').html() "<p>外側の div 要素をクリックしました。<p/>";<br> var txt = $('#msg') .html( txt);<br>event.stopPropagation(); // イベントのバブリングを防止します<br> });<br> // クリックイベントを body 要素にバインドします<br> $("body").bind(" click ",function(){<br> var txt = $('#msg').html() "<p>body 要素をクリックしました。<p/>";<br> var txt = $ ('#msg').html() ).html(txt);<br> });<br>})<br> event.stopPropagation(); // イベントのバブリングを停止します 送信ボタンをクリックすると、デフォルトのイベントが発生する場合があります。たとえば、別のインターフェイスにジャンプします。ただし、検証に合格しない場合は、ジャンプしないでください。この時点で、event.preventDefault(); //デフォルトの動作（フォーム送信）を防止できます。 次のようなケースがあります: コードをコピー コードは次のとおりです: <br>$(function(){<br> $("#sub").bind("click",function(event){<br> var username = $("#username").val(); // 要素の値を取得します。val() メソッドは、選択された要素の値を返すか、設定します。 #username").val(); / /値が空かどうかを判断します<br> $("#msg").html("<p>テキストボックスの値を空にすることはできません。</p> "); //プロンプトメッセージ<br> (); //デフォルトの動作を防止します (フォーム送信)<br> }<br> })<br>})<br> html 部分: コードをコピー コードは次のとおりです。 < form action= "test.html">ユーザー名: デフォルトの動作を防ぐもう 1 つの方法は、false を返すことです。効果も同様です。 コードは次のとおりです: コードをコピー コードは次のとおりです: <br>$(function(){<br> $("#sub").bind("click",function(event){<br> var username = $("#username").val( ); // 要素の値を取得します <br> if(username==""){ // 値が空かどうかを判断します <br> $("#msg").html("<p>値テキスト ボックスを空にすることはできません。<br> }) <br>同様に、上記のバブリングイベントも false を返すことで処理できます。 <br> <br><br><br><br> </div>コードをコピー<p></p> コードは次のとおりです:<p></p> <div class="codetitle"> <span><script type="text/javascript "> <a style="CURSOR: pointer" data="39858" class="copybut" id="copybut39858" onclick="doCopy('code39858')">$(function(){<u> // クリック イベントをスパン要素にバインドします </u> $('span').bind("click",function(event){</a> var txt = $( '#msg').html() "<p>内側のspan要素をクリックしました。<p/>";</span> ;</div> });<div class="codebody" id="code39858"> // クリック イベントをバインドしますdiv 要素<br> $('#content').bind("click",function(event){<br> var txt = $(' #msg').html() "<p>外側の div 要素<p/>";<br> <br> });<br> // クリック イベントを body 要素にバインドします <br> $("body").bind("click",function (){<br> var txt = $('#msg' ).html() "<p>body 要素をクリックしました。<p/>";<br> <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
