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

Posted 2023-02-21

【中文标题】如何在单击同一tr的td内的按钮时防止单击tr [重复]

【英文标题】：how to prevent clicking on tr while clicking button inside td of same tr [duplicate]

【发布时间】：2020-10-14 16:36:13

【问题描述】：

在表格行中，我有像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();

【问题讨论】：

api.jquery.com/event.stopPropagation

【参考方案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

【讨论】：

这样可以用吗 onclick="deleteRecord(id);" function deleteRecord( 在这里得到什么 ) what.stopPropagation

是的，有可能……见here

感谢@David784 很有帮助

【参考方案2】：

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

【讨论】：

如何使用 onclick="deleteRecord(id);"功能 deleteRecord( 在这里得到什么 ) what.stopPropagation

尝试将行重构为 $content .= '<td><button data-id="$val->id" onclick="deleteRecord"></td>'; 并在 deleteRecord function deleteRecord(event) event.stopPropagation(); var id = event.target.getAttribute('data-id'); ...

感谢 skapicic 这是个好建议