我有一个表，单击该行上的任意位置将打开一个模式对话框（以编辑该行），但有些列包含链接。单击这些链接时，我不想转到该链接而不打开模式。
<body>
<div class="container-fluid">
<table class="table table-sm table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th><th>Link</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer;" role="button" data-bs-toggle="modal" data-bs-target="#myModal">
<td>1</td><td><a href="https://google.com" target="_blank">go to google</a></td><td>2024-05-18</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content border">
<div class="modal-header px-card bg-light border-bottom-0 p-1">
<h5 class="modal-title">Modal</h5>
<button class="btn-close me-n1" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-card">
<p>Here's some stuff</p>
</div>
<div class="card-footer d-flex justify-content-end align-items-center bg-light">
<button class="btn btn-primary px-4" type="button" data-bs-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>
我尝试在 href 的 onclick 中停止传播，但它在调用 show.bs.modal 后被调用，所以对我没有帮助。我可以为 show.bs.modal 添加一个事件侦听器，并希望获得单击的 href 元素，以便我可以确定是否应该忽略它，但 relatedTarget 是行，所以这对我没有帮助.
我的做法是错的吗？我怎样才能达到我想要的结果？
您可以使用 JavaScript 创建模式，而不是使用
data-bs-toggle="modal"data-bs-target="#myModal"trdata-data-modal-toggle="myModal"// create modal instance
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
// select modal-trigger element by using the proper selector
const modalTriggerEl = document.querySelector('[data-modal-toggle="myModal"]');
// add event listener
modalTriggerEl.addEventListener('click', (e) => {
// if it isn't 'a' element, then open the modal
if (e.target.tagName.toLowerCase() !== 'a') {
myModal.show();
}
});