javascript - 如何处理点击而不是子元素？

Question

我使用以下代码处理点击。

带输入的表

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

点击处理程序

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

http://jsfiddle.net/n96eW/

它运行良好，但如果我在 td 中有一个复选框，它也会在单击时处理它。

有没有办法处理 TR 的点击但不触发子元素？

Answer 1

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

在您的复选框中添加另一个事件处理程序以停止传播：

$('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');

});