Prevent button click from activating <tr> onclick event

Question

I have a table with a row that contains a button within one of the cells. The <tr> has an onclick event. I want the button to operate independently of the <tr> onclick yet operate within the same row.

HTML:

<tr onclick="$trigger();">
   <td>Data A</td>
   <td>Data B</td>
   <td>Data C</td>
   <td><button onclick="$buttonClicked();">Submit</button></td>
</tr>

Is this possible?

Answer 1

You can use event.stopPropagation():

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('button').click(function(event) {
    event.stopPropagation();
});

Answer 2

This is event bubbling, which is causing the parent click to be activated.

$('button').click(function(e) {
   e.stopPropagation();
});

If your browser is IE<9, try this:

$('button').click(function(e) {
   e.cancelBubble();
});

http://www.quirksmode.org/js/events_order.html