js_javascriptスキルのpreventDefaultとstopPropagationの詳細な説明

まず、js のPreventDefault メソッドと stopPropagation メソッドの違いを説明しましょう:
preventDefault メソッドは何をしますか?たとえば、Baidu は HTML の最も基本的なものであり、その機能は http への Baidu リンクをクリックすることです。 //www .baidu.com、これは タグのデフォルトの動作であり、preventDefault メソッドはそのデフォルトの動作の発生や他の現象の発生を防ぐことができます。コードを見れば誰でも理解できるでしょう:

コードをコピーします コードは次のとおりです:

この時点で Baidu リンクをクリックしても http://www.baidu.com は開かず、警告ダイアログ ボックスが表示されるだけです。

PreventDefault メソッドについてはここで説明しましたが、stopPropagation メソッドについてはどうすればよいでしょうか? stopPropagation メソッドについて説明する前に、まず js イベント プロキシについて説明する必要があります。

イベント プロキシは、JavaSciprt イベントで見落とされがちな 2 つの機能、イベント バブリングとターゲット要素を使用します。ボタン上のマウスクリックなど、要素でイベントがトリガーされると、その要素のすべての祖先要素で同じイベントがトリガーされます。このプロセスはイベント バブリングと呼ばれます。イベントは元の要素から DOM ツリーの最上位までバブルアップします。どのイベントでも、ターゲット要素は元の要素であり、この場合はボタンです。ターゲット要素 これは、イベント オブジェクトの属性として表示されます。イベント プロキシを使用すると、要素にイベント ハンドラーを追加し、イベントが子要素からバブルアップするのを待って、イベントがどの要素から開始されたかを簡単に判断できます。

stopPropagation メソッドは、js イベントがバブルアップするのを防ぐためのものです。コードの一部を見てください。

コードをコピー コードは次のとおりです:

<script><br> function doSomething (obj,evt) {<br>alert(obj.id);<br> var e=(evt)?evt:window.event;<br> if (window.event) {<br> e.cancelBubble = true;// ie<br> でのバブリングを防止します } else {<br> //e.preventDefault();<br> e.stopPropagation();// 他のブラウザでのバブリングを防止します<br> }<br>} <br></script>

これはparent1 divです。

これは child1 です。

これはparent1 div です。 < /p>

これは親 2 div です。

これは child2 です。バブルします。

これはparent2 div です.

上記のコードを実行するとわかります。