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”类，但是我不希望在单击按钮时发生这种情况。

Answer 1

您可以在点击按钮时使用Event.stopPropagation()：

$('#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>

Answer 2

您可以确保单击的td不在带有按钮的列中。使用:not，可以确保匹配的元素与特定选择器不匹配；使用:nth-child，可以将其容器中的第三个td指定为要排除的元素：

$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
  console.log('click registered');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <tr>
    <td>td 1</td>
    <td>td 2</td>
    <td><button>button</button></td>
  </tr>
</table>

Answer 3

您可以在按钮onclick事件上使用stopPropagation（）或preventDefault（）。这将防止事件冒泡到按钮的父元素（td，tr，table等）。假设您的按钮类为“行按钮”，下面是一个示例代码：

$('.row-button').on('click', function(event)){
    event.stopPropagation();
    //Do what are intended upon button click.
}

Answer 4

您正在体验DOM的Event Propagation功能。

您要做的是通过在处理程序中调用Event.stopPropagation()来防止这种情况的发生

要停止使用jQuery事件处理程序传播，只需在td点击处理程序的最后一行返回false即可。

使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？

4 个答案: