How to handle a click on a <tr> but not on the child elements?

Question

I handling the click with following code.

Table with input

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

Click handler

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

http://jsfiddle.net/n96eW/

It's working well, but if I have a checkbox in the td, it's handling it too when clicked.

Is there a way to handle the click of the TR but not trigger on the child elements?

Answer 1

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

Add another event handler in your checkbox to stopPropagation:

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

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