如何避免HTML和JavaScript/jQuery中其他元素背後的事件

Question

我有一個表格裏面有一些div。

我想要一個事件發生，當我點擊一個td元素，但我也想要一個事件發生時，我點擊一個div元素。 正如你可以在這個小提琴http://jsfiddle.net/rkGkp/1/中看到的，我的問題是，當我點擊div元素時，div和td事件都被觸發，但我只想觸發div的事件。

我使用這些事件偵聽器

$(function() { 
    $("#div").on("click", function() { 
     alert("a div is clicked"); 
    }); 
}); 
$(function() { 
    $(".td").on("click", function() { 
     alert("a td is clicked"); 
    }); 
}); 

我能做些什麼來避免我身後的div元素觸發一個事件？

Answer 1

看看這裏：FIDDLE

我用stopPropagation()

CODE

$("#div").on("click", function(event) { 
    event.stopPropagation(); 
    alert("a div is clicked"); 
}); 

Answer 2

這樣就可以達到你所需要的最簡單的方法。簡單地檢查點擊目標是在格：

$(function() { 
    $("#div").on("click", function() { 
     alert("a div is clicked"); 
    }); 
}); 
$(function() { 
    $(".td").on("click", function(e) { 
     if(!$(e.target).is("#div")){ 
     alert("a td is clicked"); 
     } 
    }); 
});