html的DOM是層級包含關係的,比如巢狀的DIV，如果三個DIV都綁定了事件的話，最內層的DIV的事件觸發會導致父級DIV所繫結的事件的觸發，就像湖水裡面底層的氣泡在從底部到湖面會觸發各個深度的事件一樣。html的DOM的這種機制有時候會給我們帶來麻煩，因為我只是希望我所操作的那個物件的事件觸發，而並不希望他的父級物件的事件觸發,對於這種情況下，我們可以通過程式碼在某個層級上來阻止事件繼續冒泡，這樣的話哪些我們不希望觸發事件的那些物件的事件就不會觸發了。

       下面的例子中有三個DIV，最外層是DIV1，中間是DIV2，最內層是DIV3，如果不採取措施去阻止冒泡機制的話，DIV3的點選會觸發DIV2及DIV1的事件觸發。例子的頁面程式碼如下，這裡是Razor的語言的頁面。

@{
    Layout = null;
}
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#div1").click(function (event) {
            alert("div1");
        });

        $("#div2").click(function (event) {
            event.stopPropagation(); 
            alert("div2");
        });

        $("#div3").click(function (event) {
            alert("div3");
        });
    });
</script>

<div id="div1" style="width:400; height:300; background-color:Blue">DIV1
    <div id="div2" style="width:300; height:200; background-color:Yellow">DIV2
        <div id="div3" style="width:200; height:100; background-color:Red">DIV3</div>
    </div>
</div>
 

頁面執行效果如下：

當我們點選DIV3時，我們會發現依次彈出DIV23，DIV2，DIV1

那麼如何阻止冒泡呢？我們修改DIV2的事件如下：

$("#div2").click(function (event) {
      //result += "[div2]";
      event.stopPropagation();
      alert("div2");
});

這時候只會彈出DIV3和DIV2

這樣DIV1的事件就不會觸發了，阻止了冒泡。