jQuery阻止事件冒泡具體實作_jquery

下面是html程式碼部分：

複製程式碼 程式碼如下:

    外層div元素

    內層span元素
    外層div元素

對應的jQuery程式碼如下：

複製代碼

代碼如下:

    });})

當點擊span時，會觸發div與body 的點擊事件。點擊div時會觸發body的點擊事件。

如何防止這種冒泡事件發生呢？

修改如下：

複製代碼

代碼如下:

event.stopPropagation(); // 阻止事件冒泡

有時候點擊提交按鈕會有一些預設事件。例如跳到別的介面。但是如果沒有通過驗證的話，就不應該跳轉。這時候可以透過設定event.preventDefault(); //阻止預設行為 ( 表單提交 )。

下面是案例：

複製程式碼

程式碼如下:

html部分：

複製程式碼 程式碼如下:

使用者名稱：

還有一個防止預設行為的方法就是return false。效果一樣。

程式碼如下：

複製代碼

代碼如下:

複製代碼 代碼如下:

$(function(){

       // 為span元素綁定click事件
    $('span').bind("click",function(event){
   msg').html() "

內層span元素點擊.

";
        $('#msg').html(txt);
      );
    // 為div元素綁定click事件
    $('#content').bind("click",function(event){
     html() "

外層div元素點擊.

";
        $('#msg').html(txt);
       >    // 為body元素綁定click事件
    $("body").bind("click",function(){
        var txt = $('#msg').html( >body元素被點選.

";
        $('#msg').html(txt);
    });
})