时间戳

首页 > 解决方案 > 如何在单击同一tr的td内的按钮时防止单击tr

javascript - 如何在单击同一tr的td内的按钮时防止单击tr

问题描述

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

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

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

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

代码：

$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();

}

标签： javascripthtmljquery

解决方案

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

请参见下面的示例：您会注意到，当您单击按钮时，您只会看到“单击按钮”的控制台日志，而不是“单击行”。这是因为stopPropagation阻止了 click 事件的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>';

有关更多信息，请参阅此答案

推荐阅读