Prevent table row onclick event to fire when clicking button inside the row

Question

I have a table row with ONCLICK event (that toggles additional data below). Inside one of the row cells I have a button (when clicked is performing an AJAX action). When I click

Answer 1

If you dislike the javascript solution, in many cases a CSS solution is possible as well:

style="pointer-events: none;"

That will supress the <tr> onclick event.

However, in some cases I still had issues where it didn't seem to work. In the majority of cases I just use the style above.

Answer 2

Add an event.stopPropagation(); to your buttons click handler. For more information, have a look here and here.

Answer 3

If you use jQuery, you can just do this instead:

tbody.on('click', 'tr', function (e) {
    let target = $(e.target);
    if (target.is('i') || target.is('button') || target.is('a') || target.hasClass('select-checkbox')) {
        return;
    }
    //your stuff here
});

Answer 4

 <table>
    <thead>
          <tr>
              <th>Card_ID</th>
                <th>Card_Number</th>
                 <th>Status</th>
                  <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="pointer-events: none;">
                        <td>3</td>
                        <td>12345</td>
                        <td>Active</td>
                        <td><button style="pointer-events: auto;" type="button" id="Inactive" class="btn btn-sm"></button></td>
                    </tr>
                </tbody>
            </table>