单击行内的按钮时，防止触发表行 onclick 事件

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 on the button - the Row's onclick event 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

Answer 1

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

Answer 2

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