JSバブルメカニズムとは、イベントがトリガーされた後にバブルイベントがブロックされない場合、要素がイベントAを定義する場合、イベントは親クラスのクリック関数をトリガーします。
次の例に示すように：
コードコピーは次のとおりです。
<html>
<script type = "text/javascript" src = "jquery-1.7.1.js"> </script>
<スクリプト>
関数ialertdouble（e）{
アラート（ 'innerdouble'）;
stopbubble（e）;
}
関数ialertthree（e）{
アラート（ 'innerthree'）;
stopbubbledouble（e）;
}
関数stopbubble（e）{
var evt = e || window.event;
evt.stoppropagation？evt.stoppropagation（）:( evt.cancelbubble = true）; // bubblesが膨らまないようにします。
}
関数stopbubbledouble（e）{
var evt = e || window.event;
evt.stoppropagation？evt.stoppropagation（）:( evt.cancelbubble = true）; // bubblesが膨らまないようにします。
evt.preventdefault（）; //ブラウザのデフォルト動作をブロックして、リンクがジャンプしないように
}
$（function（）{
//方法1
//$('#jquerytest').click(function（event）{
// alert（ 'innerfour'）;
// event.stoppropagation（）;
// event.preventdefault（）;
//}）;
//方法2
$（ '＃jQueryTest'）。クリック（function（）{
アラート（ 'innerfour'）;
falseを返します。
}）;
}）;
</script>
<div onclick = "alert（ 'without'）;"> withe
<div onclick = "alert（ 'middle'）;"> middle
<div onclick = "alert（ 'inner'）;"> inner </div>
<div onclick = "ialertdouble（event）"> innerdouble </div>
<p> <a href = 'http：//www.baidu.com' onclick = "ialertthree（event）"> innerthree </a> </p>
<p id = 'jQuerytest'> <a href = 'http：//www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
内側、「内側」、「中間」、「without」をクリックすると、順番にポップアップ表示されます。これがイベントバブルです。
直感的に言えば、最も内側の領域が親ノードにある場合、実際には親ノード領域でクリックされるため、イベントが広がります。
実際、多くの場合、イベントが泡立つことを望んでいません。これにより、複数のイベントが同時にトリガーされるためです。
次：InnerDoubleをクリックしましょう。彼女は、呼び出されたメソッドialertdouble（）でstopbubble（）メソッドを呼び出したため、バブルがかかりません。
しかし、それがリンクである場合、バブルも防止することがわかりますが、ジャンプします。これはブラウザのデフォルト動作です。 PreventDefault（）メソッドを使用してブロックする必要があります。詳細については、ialertthree（）を確認できます。
現在、主流の人々はjQueryを使用してクリックイベントをバインドしていますが、これははるかに簡単です。
イベントをクリックするときにパラメーターイベントに合格し、直接
event.stoppropagation（）;
event.preventdefault（）; //これを追加するリンクは必要ありません。
それだけです。
フレームワークは良いですが、実際には、イベントハンドラーにfalseを返すことができます。
[上記の詳細なコードを参照して、jquery.jsをロードすることを忘れないでください。 】
実際、各クリックイベントに判断を追加することもできます。
コードコピーは次のとおりです。
$（ '＃id'）。クリック（function（event）{
if（event.target == this）{
//何かをします
}
}）
分析：イベントハンドラーの可変イベントは、イベントオブジェクトを保存します。 Event.Targetプロパティは、イベントのターゲット要素を保持します。このプロパティはDOM APIで指定されていますが、すべてのブラウザーによって実装されていません。 jQueryは、このイベントオブジェクトに必要な拡張機能を作成し、このプロパティをブラウザで使用できるようにします。 .targetを使用すると、最初にイベントを受信したDOMの要素（つまり、実際にクリックされる要素）を決定することができます。さらに、これはイベントを処理するDOM要素を指しているため、上記のコードを記述できることがわかっています。
ただし、jQueryがイベントをバインドする場合は、falseを返すことをお勧めします。