Question

在表格行中，我有诸如<button id="pay" class="btn btn-card">Pay</button> <script src="https://js.stripe.com/v3/"></script> <script> const paymentButton = document.getElementById('pay'); paymentButton.addEventListener('click', () => { const stripe = Stripe('<%= ENV['STRIPE_PUBLISHABLE_KEY'] %>'); stripe.redirectToCheckout({ sessionId: '<%= @order.checkout_session_id %>' }); }); </script>之类的click事件，并且正在模式中显示详细信息。因此，在tr内部，我在动作td下还有两个按钮，这些按钮还具有诸如onclick="trDetailsModal(this, 'id')";

的onclick事件。

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

现在的问题是，当我单击按钮之一时，tr onclick="deleteRecord('id')"也会被触发并在模型中显示详细信息。

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

代码：

onclick

Answer 1

通常可以通过在按钮的click事件上调用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使用data属性的解决方案是恕我直言，这是一种更好的方法，但是如果您真的想使用内联事件处理程序，则可以执行以下stopPropagation：

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

see this answer for more info

Answer 2

您需要已触发的事件，并且需要stop its propagation

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

2 个答案: