Blazor中点击子按钮时如何避免触发父元素点击事件？

在Blazor中，要实现点击内部按钮仅执行Redirect2（添加购物车），点击父卡片其他区域执行Redirect（跳转详情页），只需给按钮的点击事件添加阻止冒泡的属性即可，具体实现如下：

核心解决方法 #

在按钮的@onclick指令后追加@onclick:stopPropagation="true"，该属性会阻止点击事件向上冒泡到父级元素，从而避免触发父div的Redirect函数。

完整代码示例 #

<!-- 父卡片容器，绑定跳转详情页的点击事件 -->
<div @onclick="Redirect" class="product-card">
    <h3>商品名称</h3>
    <p>售价：¥99</p>
    <!-- 添加购物车按钮，绑定添加逻辑并阻止事件冒泡 -->
    <button @onclick="Redirect2" @onclick:stopPropagation="true">加入购物车</button>
</div>

@code {
    // 注入导航服务用于页面跳转
    [Inject]
    public NavigationManager NavigationManager { get; set; }

    // 跳转到商品详情页的逻辑
    private void Redirect()
    {
        NavigationManager.NavigateTo("/product/detail/1001");
    }

    // 添加商品到购物车的逻辑
    private void Redirect2()
    {
        // 这里编写添加购物车的业务代码，例如调用购物车服务
        // CartService.AddProduct(1001);
    }
}

原理说明 #

• 当点击按钮时，@onclick:stopPropagation="true"会阻止点击事件向父级div传播，因此只会执行Redirect2函数，不会触发父元素的Redirect。
• 点击卡片的其他区域时，事件正常触发父div的Redirect函数，实现跳转详情页的需求。

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