Prevent button click from activating <tr> onclick event

css, html-table, javascript, jquery

Solution

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();
});

Problem

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?

Original source