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

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 on the button - the Row's onclick eve开发者_运维百科nt also fires and what happens is that the additional data appears before the AJAX call completes (which is a bad behavior for me). Any ideas how can I solve this elegantly? (without identifying and coding it into the row's onclick code) Thanks

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

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.

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

 <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>