Blazor WASM如何防止点击子元素触发父折叠面板状态切换

问题原因 #

本质是DOM事件冒泡机制：点击头部区域内的按钮等子元素时，点击事件会逐层向上传递给父级的头部容器，触发头部绑定的折叠切换逻辑。

解决方案 #

有两种可行方案，按需选择即可：

方案1：不用改组件源码，直接在业务代码处理（最省事，推荐） #

给头部里所有不需要触发折叠的交互元素（按钮、链接、输入框等）加Blazor内置的事件冒泡阻止属性就行，修改后的按钮代码示例：

<button class="btn btn-success" @onclick:stopPropagation="true">Click me</button>

@onclick:stopPropagation="true"会直接阻止当前元素的点击事件向上冒泡，自然不会触发父级头部的折叠逻辑，不需要动组件源码，适配性最高。

方案2：修改CollapsePanel组件源码，从底层解决 #

如果希望所有用到这个组件的场景都默认不会被子元素点击触发折叠，可以修改CollapsePanel.razor的逻辑：

• 把原来整个头部都绑定点击事件的结构拆分，仅给专门的折叠触发区域（比如箭头图标、头部空白区域）绑定点击事件，自定义内容区域不绑定事件，调整后的头部结构示例：

@if (Collapsed)
{
    <div id="@($"collapse_{_componentId}")" class="collapseHeader collapsed @(Animate ? "animate" : "")">
        <!-- 只有这个触发区域绑定折叠事件 -->
        <div @onclick="ExpandCollapse" class="collapse-trigger">
            <!-- 这里放折叠箭头、默认标题等固定触发元素 -->
        </div>
        <!-- 自定义内容区域不绑定事件，子元素点击不会触发折叠 -->
        <div class="header-custom-content">
            @(CommonHeader ?? CollapsedHeaderContent)
        </div>
    </div>
}
<!-- 展开状态的头部结构同步对应修改即可 -->

修改完成后，所有放入自定义内容区域的交互元素默认都不会触发折叠，不用业务代码额外加属性。

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