如何處理點擊<tr>而不是子元素？

Question

我用下面的代碼處理點擊。

表與輸入

<table> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
    </tr> 
</table>​ 

Click處理

$('table tr').click(function(){ 
    alert('clicked'); 
});​ 

http://jsfiddle.net/n96eW/

它的工作很好，但如果我在TD複選框，單擊時的操控它。

有沒有辦法處理點擊的TR，但不觸發子元素？

Answer 1

http://jsfiddle.net/n96eW/1/

在複選框添加另一個事件處理程序stopPropagation：

$('table tr').click(function(){ 
    alert('clicked'); 
}); 

$('table tr input').click(function(e) { 
    e.stopPropagation(); 
}); 
​ 

Answer 2

您可以檢查event.target來過濾事件：

$('table tr').click(function(e){ 
    if(e.target.tagName.toLowerCase() != "input") { 
     alert('clicked'); 
    } 
});​ 

Answer 3

你也可以使用

$("tr").on('click',function() { 

    if (!$(event.target).is('input')) 
    alert('clicked'); 

});