从数据href功能中排除子节点

Question

我有一个表，在其中我对每一行使用数据href属性，这样我就可以访问每一行的相应页面。在每一行的末尾，我都放了一个"编辑"和一个"删除"按钮。它们一直正常工作，直到我添加了甜蜜警报2确认模式。问题是，当我单击删除按钮时，会触发父tr节点的数据href(以及删除功能(。如何从tr数据href功能中排除此按钮(甚至整个删除表单(？

tr节点：

<tr data-href="view_client/{{ $client->id}}">     
<td><strong>{{$client->surname }}</strong></td>
...
<td style="width:15%" >
<div class="d-flex justify-content-evenly">
<a href="/edit_client/{{ $client->id }}" class="btn btn-sm btn-warning flex-fill">
<i class="far fa-edit"></i>Edit</a>
<form action="/clients/{{ $client->id }}" id="deleteForm" method="POST">
@method('DELETE')
@csrf
<button type="button" class="btn btn-danger show_confirm"><i class="far fa-trash-alt"></i></button>
</form>
</div>
</td>
</tr>

show_confirm:的js

$('.show_confirm').on('click', function(e) {
var form =  $('#deleteForm');
e.preventDefault();
Swal.fire({
title: "Delete Confirmation",
text: "Are you sure?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#ff0f15',
cancelButtonColor: '#ed032d9e9e9e',
confirmButtonText: 'Yeah! Go ahead!'
})
.then((willDelete) => {
if (willDelete.isConfirmed) {
form.trigger('submit');
}
});
});

Answer 1

看起来您需要防止子元素上的单击冒泡到父元素。这可以通过调用event.stopPropagation()进行解释来完成，请阅读此处的第二段：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
因此，在事件处理程序中只需添加调用：

$('.show_confirm').on('click', function(e) {
var form =  $('#deleteForm');
e.preventDefault();
e.stopPropagation(); // <---here
Swal.fire({
title: "Delete Confirmation",
text: "Are you sure?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: '#ff0f15',
cancelButtonColor: '#ed032d9e9e9e',
confirmButtonText: 'Yeah! Go ahead!'
})
.then((willDelete) => {
if (willDelete.isConfirmed) {
form.trigger('submit');
}
});
});