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

Question

I am handling the click with the following code.

Entry table

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

Click handler

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

It works well, but if I have a checkbox in the td, it handles it when clicked as well.

Is there a way to handle the TR click but not activate the children?

+3

yarikus Apr 10 12 at 10:02

3 answers

Andreas Wong · Answer 1 · 2012-04-10T10:04:17+0000

Add another event handler to your checkbox to stop scrolling:

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

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

Dennis · Answer 2 · 2012-04-10T10:05:39+0000

You can check event.target

for event filtering:

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

Ali Alavi · Answer 3 · 2015-12-02T20:33:52+0000

You can also use

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

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

});