最初に、JSのPreventDefaultとStoppropagationの2つの方法の違いを説明します。
PreventDefaultメソッドの役割は何ですか？たとえば、<a href = "http://www.baidu.com"> baidu </a>、これはhttp：// wwwへのリンクをクリックすることです.baidu .. com、これは<a>ラベルのデフォルトの動作であり、PreventDefaultメソッドは、他のことがデフォルトの動作が発生しないようにすることです。コードの段落を参照してください。誰もが理解しています。
次のようにコードコードをコピーします。
<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title> JSリンクジャンプを防ぐ</title>
<script type = "text/javascript">
関数stopdefault（e）{
if（e && e.preventdefault）
E.PreventDefault（）;
それ以外
window.event.returnvalue = false;
falseを返します。
}
</script>
</head>
<body>
<a href = "http://www.baidu.com" id = "testlink"> baidu </a>
<script type = "text/javascript">
var test = document.getElementById（ 'testLink'）;
test.onclick = function（e）{{
alert（ '私のリンクアドレスは次のとおりです。' + this.href + 'ですが、ジャンプしません。'）;
stopdefault（e）;
}
</script>
</body>
</html>
この時点で、Baiduリンクをクリックすると、http：//www.baidu.comを開くことはありませんが、アラートダイアログボックスをポップアップするだけです。
StopPropagationメソッドはどうですか？ StopPropagationメソッドについて話す前に、JSイベントエージェントを説明する必要があります。
イベントプロキシは、JavaScipRTインシデントでしばしば無視される2つの機能を使用します。イベントバブルとターゲット要素です。たとえば、要素のイベントがトリガーされると、マウスがボタンをクリックし、その要素のすべての祖先で同じイベントがトリガーされます。このプロセスは、インシデントバブルと呼ばれます。どんなイベントでも、ターゲット要素は原始的な要素であり、例ではボタンでもあります。ターゲット要素は、イベントオブジェクトに属性の形で表示されます。イベントエージェントを使用する場合、イベントプロセッサを要素に追加し、イベントがサブレベルの要素からバブルするのを待ち、イベントが始まる要素を簡単に判断できます。
Stoppropagation方法は、JSイベントが泡立つのを防ぎ、コードを見ることです。
次のようにコードコードをコピーします。
<
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<head>
<Title> JSインシデントバブル伝送を防ぐ（CancelBubble、StopPropagation）</title>
<Meta name = "keywords" content = "js、event bubbling、cancelbubble、stoppropagation" />
<スクリプト>
function dosomething（obj、evt）{
アラート（obj.id）;
var e =（evt）？evt：event;
if（window.event）{
e.cancelbubble = true;
} それ以外 {
//e.preventdefault（）;
e.StopPropagation（）;
}
}
</script>
</head>
<body>
<div id = "parent1" onclick = "alert（this.id）">
<p>これはPain1 divです
<div id = "child1" onclick = "alert（this.id）">
<p>これは子供です
</div>
<p>これはPain1 divです
</div>
<br />
<div id = "parent2" onclick = "alert（this.id）">
<p>これはparent2 divです
<div id = "child2" onclick = "dosomething（this、event）;" >> ">
<p>これは子供です
</div>
<p>これはparent2 divです
</div>
</body>
</html>
上記のコードを理解しましょう。