从 data-href 功能中排除子节点

Question

我有一个表，我在每一行上使用 data-href 属性，这样我就可以访问每一行对应的页面。在每一行的末尾，我放置了一个“编辑”和一个“删除”按钮。他们工作正常，直到我添加了甜蜜警报 2 确认模式。问题是当我单击删除按钮时，父 tr 节点的 data-href 被触发（以及删除功能）。如何从 tr data-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');
          }
        });
    });