如何点击表格行内链接时阻止Bootstrap模态框弹出

我有一个表格，点击行内任意位置都会打开模态框以编辑该行，但部分列包含链接。当点击这些链接时，我希望仅跳转至链接目标，而不打开模态框。

代码示例：

<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>

我曾尝试在链接的onclick事件中阻止事件传播，但该操作在show.bs.modal事件触发后才执行，因此无效。我也尝试监听show.bs.modal事件，期望获取被点击的链接元素以判断是否需阻止模态框弹出，但relatedTarget为行元素，无法满足需求。请问我的思路是否有误？该如何实现预期效果？

思路方向没问题，只是需要调整事件处理的时机和方式，以下两种方案均可解决问题：

方案一：给链接添加事件阻止冒泡 #

直接在链接的点击事件中阻止事件向上传播，同时确保链接自身的跳转行为正常执行：

修改链接标签，增加onclick事件：

<a href="https://google.com" target="_blank" onclick="event.stopPropagation();">go to google</a>

额外补充CSS，确保链接的点击优先级不受行元素的role="button"影响：

tbody td > a {
    pointer-events: auto;
}

方案二：手动通过JS控制模态框显示 #

移除行上的Bootstrap自动触发属性，改用JS判断点击目标后再决定是否打开模态框，这种方式更灵活：

1. 移除<tr>上的role="button"和data-bs-toggle="modal"属性：

<tr style="cursor:pointer;">

2. 添加JS代码处理点击逻辑：

// 给所有表格行绑定点击事件
document.querySelectorAll('tbody tr').forEach(tr => {
    tr.addEventListener('click', function(e) {
        // 判断点击目标是否为链接或链接内部元素
        const isLinkClicked = e.target.tagName === 'A' || e.target.closest('a');
        if (isLinkClicked) return;
        
        // 非链接区域点击时打开模态框
        const modal = new bootstrap.Modal(document.getElementById('myModal'));
        modal.show();
    });
});

之前尝试无效的原因 #

你之前在链接onclick里阻止冒泡无效，是因为Bootstrap绑定在<tr>上的模态框触发逻辑，优先级高于链接的冒泡阻止操作，导致模态框先被触发。而show.bs.modal事件的relatedTarget是触发模态框的<tr>元素，所以无法获取到实际点击的链接节点，自然没法判断是否需要阻止模态框弹出。

内容的提问来源于stack exchange，提问作者Vexxed72