Blazor WASM应用复选框移动端与PC端行为不一致问题排查

核心原因 #

这个问题并非Blazor代码逻辑错误，而是移动端浏览器的触摸交互特性导致的，纯HTML场景也能复现，说明和Blazor无关：

• 移动端浏览器为了提升小元素的触摸体验，会自动扩展触摸目标的热区范围（比如复选框这类小控件），当两个复选框布局较近时，热区会发生重叠。
• 若你的逻辑是选中复选框后将其禁用，禁用元素不会响应点击事件，此时点击该元素的热区会被浏览器“重定向”到相邻的可交互复选框，导致点击同一位置时在两个选项间来回切换。

解决方案 #

根据你的单选需求，推荐以下几种方案：

方案1：改用原生单选按钮（最推荐）

原生<input type="radio">本身就是为单选场景设计的，完全符合移动端交互预期，不会出现触摸热区问题：

<div>
  <input type="radio" name="optionGroup" id="one" />
  <label for="one">one</label>
</div>
<div>
  <input type="radio" name="optionGroup" id="two" />
  <label for="two">two</label>
</div>

Blazor中只需绑定@bind-Value即可实现单选逻辑，无需手动处理复选框状态切换。

方案2：优化复选框布局与交互

若坚持用复选框模拟单选，需解决触摸热区重叠问题：

• 给每个复选框+标签包裹独立容器，设置足够内边距，确保每个触摸目标区域独立不重叠：

<div style="padding: 8px; display: block;">
  <input type="checkbox" @bind="@IsOneChecked" id="one" />
  <label for="one">one</label>
</div>
<div style="padding: 8px; display: block;">
  <input type="checkbox" @bind="@IsTwoChecked" id="two" />
  <label for="two">two</label>
</div>

• 取消“选中后禁用复选框”的逻辑，改为代码控制状态切换：点击一个复选框时，手动取消另一个的选中状态，避免禁用元素导致的点击事件重定向。

方案3：精确控制触摸目标区域

通过CSS调整触摸行为，确保每个复选框的触摸区域精确：

.checkbox-item {
  display: block;
  margin: 8px 0;
  padding: 4px;
}
.checkbox-item input[type="checkbox"] {
  touch-action: manipulation; /* 禁用浏览器自动触摸行为优化 */
}

验证方法 #

修改后用开发者工具模拟移动端（Ctrl+Shift+M），重复之前的操作步骤，检查是否还会出现同一位置点击切换选项的问题。

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