Blazor可选择表格行内复选框与行点击事件冲突如何解决

问题根因 #

你之前加的event:stopPropagation="true"不生效，核心是加错了事件：点击复选框时会先触发click事件向上冒泡到<tr>触发行点击逻辑，之后才会触发复选框自身的onchange事件。你给onchange事件加阻止冒泡，根本拦不住已经完成冒泡的click事件，所以行点击始终优先触发。

解决方案1（推荐，极简） #

直接给复选框的click事件添加阻止冒泡即可，不会影响复选框本身的勾选状态和onchange逻辑，修改后代码如下：

<tr class="@rowClasses[index]" @onclick="@((e) => RowClicked(index, outageItems.EventID))">
    <td class="col-checkbox chkColumn quarter">
       <input type="checkbox" name="@index" value="@outageItems.EventID"
              @onchange="eventArgs => { CheckboxClicked(outageItems.EventID, eventArgs.Value); }"
              @onclick:stopPropagation="true"
       />
    </td>
    <td class="col-Row quarter">...</td>
    <td>...</td>
</tr>

这个方案无需修改原有业务逻辑，直接阻断复选框点击事件向上冒泡到行，两个事件完全独立运行：

• 点击除复选框外的行区域：触发RowClicked单选逻辑
• 点击复选框：仅触发CheckboxClicked多选逻辑

解决方案2（无侵入事件拦截） #

如果你不想修改事件冒泡规则，可以在RowClicked方法内加事件源判断，点击源为复选框时不触发行选择逻辑：

1. 先修改行点击事件，把事件对象传入业务方法：

<tr class="@rowClasses[index]" @onclick="@((e) => RowClicked(e, index, outageItems.EventID))">

2. 调整RowClicked方法逻辑：

void RowClicked(MouseEventArgs e, int index, int eventId)
{
    // 判断点击源是否为复选框，是则直接返回不执行行选择逻辑
    if (e.Target is HtmlInputElement target && target.Type == "checkbox")
    {
        return;
    }
    // 原有行选择的业务逻辑写在下方
    // ...
}

这个方案适合需要保留子元素冒泡行为的复杂场景，不需要给每个子元素单独加阻止冒泡规则。

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