javascript - 用jquery选择表格行，而且点击按钮时也选择行，我该如何防止这种情况？

Question

当您单击表格行时，它会添加一个更改其外观以反映其被选中的类。

    $('#my_table tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

但是，我在列中也有一些按钮，可让您执行特定于该行的操作：

Item    Amount    Action
--------------------------------
Apple   10        [Buy] [Delete]
Banana  5         [Buy] [Delete]
Orange  14        [Buy] [Delete]

当我单击单个按钮之一时，它还会触发要添加的表格行“.selected”类，但我不希望在单击按钮时发生这种情况。

标签： javascriptjquery

Answer 1

您可以Event​.stop​Propagation()在按钮单击时使用：

$('#my_table tbody').on( 'click', 'tr', function () {
  $(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
  e.stopPropagation();
});

.selected{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <thead>
    <th>Item</th>
    <th>Amount</th>
    <th>Action</th>
  </thead>
  <tbody>
  <tr>
    <td>Apple</td>
    <td>10</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>5</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>14</td>
    <td><button>[Buy]</button><button>[Delete]</button></td>
  </tr>
  </tbody>
</table>