Bootstrap 4模态框按钮功能被可点击<tr>元素阻止的解决方案

你遇到的核心问题是事件冒泡：点击删除按钮时，点击事件会向上冒泡到父元素<tr>，触发了onclick里的页面跳转，导致模态框还没来得及弹出就被页面跳转打断了。下面给你几个实用的解决方案，既能保留行跳转功能，又能让删除按钮正常唤起Bootstrap模态框：

方案一：阻止删除按钮的事件冒泡（最简单直接） #

给删除按钮添加点击事件，阻止事件向上传递到<tr>，这样<tr>的跳转逻辑就不会被触发。

如果使用@Html.ActionLink：

@Html.ActionLink("<i class='fas fa-trash-alt'></i>", "#", null, new { 
    @class = "btn btn-danger", 
    @data_toggle = "modal", 
    @data_target = "#DeleteConfirmationModal",
    onclick = "event.stopPropagation();" // 新增阻止冒泡的代码
})

如果使用原生<button>：

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal" onclick="event.stopPropagation();">
  <i class="fas fa-trash-alt"></i>
</button>

原理很简单：event.stopPropagation()会终止事件向上冒泡到父元素，点击按钮时只会触发模态框逻辑，不会触发<tr>的跳转。

方案二：限制行跳转的触发范围 #

把<tr>的跳转逻辑移到除操作列外的其他<td>上，这样点击操作列（包含删除/编辑按钮）时就不会触发页面跳转。

示例代码：

@foreach (var item in Model)
{
    <tr class="inventory-row">
        <!-- 给非操作列添加跳转逻辑 -->
        <td onclick="location.href='@Url.Action("Action", "Controller", new { id = item.ItemID })'">@item.ItemName</td>
        <td onclick="location.href='@Url.Action("Action", "Controller", new { id = item.ItemID })'">@item.Quantity</td>
        <!-- 其他信息列同理添加onclick -->
        <!-- 操作列不添加跳转逻辑，按钮正常工作 -->
        <td>
            @Html.ActionLink("<i class='fas fa-trash-alt'></i>", "#", null, new { 
                @class = "btn btn-danger", 
                @data_toggle = "modal", 
                @data_target = "#DeleteConfirmationModal"
            })
        </td>
    </tr>
}

如果觉得重复写onclick麻烦，也可以用类选择器配合JS批量绑定：

<tr class="inventory-row">
    <td class="row-clickable">@item.ItemName</td>
    <td class="row-clickable">@item.Quantity</td>
    <td class="no-click">
        <!-- 删除/编辑按钮 -->
    </td>
</tr>

<script>
document.querySelectorAll('.row-clickable').forEach(td => {
    td.addEventListener('click', function() {
        location.href = '@Url.Action("Action", "Controller", new { id = item.ItemID })';
    });
});
</script>

方案三：事件委托优化（适合动态表格） #

如果你的表格数据是动态加载的，事件委托会更可靠。给整个表格绑定点击事件，判断点击目标是不是操作按钮，再决定是否执行跳转：

首先修改<tr>的标记，把商品ID存在data属性里：

<tr class="inventory-row" data-item-id="@item.ItemID">
    <!-- 表格列内容 -->
</tr>

然后添加JS事件委托：

<table id="inventory-table">
    <!-- 表格内容 -->
</table>

<script>
document.getElementById('inventory-table').addEventListener('click', function(e) {
    // 判断点击的元素是不是操作按钮或按钮内的图标
    const isActionBtn = e.target.closest('.btn');
    if (!isActionBtn) {
        // 获取当前行的商品ID并跳转
        const row = e.target.closest('tr');
        const itemId = row.dataset.itemId;
        location.href = '@Url.Action("Action", "Controller")' + `?id=${itemId}`;
    }
});
</script>

这种方法避免了给每个元素重复绑定事件，即使表格后续动态新增行，逻辑依然有效。

另外你提到编辑按钮能正常工作，是因为编辑按钮本身是跳转链接，浏览器会优先处理<a>标签的跳转，而删除按钮是唤起当前页面的模态框，没有跳转动作，所以事件冒泡导致了冲突——上面的方案都能解决这个问题，完全不需要重新设计界面~

内容的提问来源于stack exchange，提问作者Greg Hess Jr