Как обращаться с кликом на <tr>, но не на дочерних элементах?

Question

Я обрабатываю щелчок следующим кодом.

Стол с входом

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

Нажмите обработчик

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

http://jsfiddle.net/n96eW/

Это хорошо работает, но если у меня есть флажок в тд, это его обработки тоже при нажатии.

Есть ли способ обработать щелчок 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'); 

});