如何在单击同一tr的td内的按钮时防止单击tr [重复]

Question

在表格行中，我有像onclick="trDetailsModal(this, 'id')" 这样的点击事件，并且我在模式中显示了详细信息。所以在 tr 里面我还有两个按钮在动作 td 下，这些按钮也有像 onclick="deleteRecord('id')" 这样的 onclick 事件；

我可以通过单击 tr 来查看模式中的详细信息。

现在的问题是，当我单击其中一个按钮时，tr onclick 也会被触发并在模型中显示详细信息。

那么如何在单击其中一个按钮时停止 tr onclick。

代码：

$content .= '<tr class="trClass" onclick="trDetail(this, '.$val->id.');">';
$content .= '<td>some value</td>';
$content .= '<td><button onclick="deleteRecord('.$val->id.')"></td>';
$content .= '</tr>';

function deleteRecord(id){

  $(".trClass").off("click");
  $("#myModal").hide();

}

Answer 1

这通常通过在按钮的单击事件上调用stopPropagation 来完成，这样可以防止事件冒泡。

请参见下面的示例：您会注意到，当您单击按钮时，您只会看到“按钮被点击”的控制台日志，而不是“行被点击”。这是因为stopPropagation 阻止了tr 的点击事件触发。

$('tr').on('click', function(e){
  console.log('row clicked');
});

$('.delete').on('click', function(e){
  e.stopPropagation();
  console.log('button clicked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td> my row </td>
    <td> <button class='delete'>delete</button> </td>
  </tr>
</table>

*编辑：@skapicic 使用数据属性的解决方案是恕我直言，这是一种更好的方法，但如果你真的想使用内联事件处理程序，你可以像这样执行 stopPropagation：

$content .= '<td><button onclick="event.stopPropagation(); deleteRecord('.$val->id.')"></td>';

see this answer for more info

Answer 2

需要已经触发的事件，需要stop its propagation