Blazor:Razor组件防止点击穿透

本文介绍了在使用Blazor开发时,如何在子组件中通过包裹div并应用`stopPropagation`来防止原生DOM元素的事件向上传播。详细展示了如何处理不同按钮的点击事件,以及如何阻止特定事件的传递。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

微软官方文档

在这里插入图片描述

如何防止点击传统

我们就算封装成立Blazor组件,我们还是对原生的DOM元素进行操作

在子组件最外层包一个div。在DIV里面阻止组件事件的传播

<div style="margin-left:10px;" @onclick:stopPropagation>
	<--自定义组件内容-->
    <Button ButtonStyle="ButtonStyle.None" Icon="fas fa-pen-to-square" Size="Size.ExtraSmall" OnClick="EditBtn"></Button>
    <Button ButtonStyle="ButtonStyle.None" Icon="fas fa-plus" Size="Size.ExtraSmall" OnClick="AddBtn"></Button>
    <PopConfirmButton Placement="Placement.Top"
                      ButtonStyle="ButtonStyle.None"
                      Color="Color.Danger"
                      ConfirmIcon="fa-solid fa-triangle-exclamation text-danger"
                      ConfirmButtonColor="Color.Danger"
                      Content="确定删除数据吗?"
                      Icon="fas fa-minus"
                      Size="Size.ExtraSmall"
                      IsAsync="false"
                      OnConfirm="DeleteBtnTask" />
    @* <Button ButtonStyle="ButtonStyle.None" Icon="fas fa-minus" Size="Size.ExtraSmall" OnClick="DeleteBtn"></Button> *@
    <Button ButtonStyle="ButtonStyle.None" Icon="fas fa-angle-up" Size="Size.ExtraSmall" OnClick="UpBtn" ></Button>
    <Button ButtonStyle="ButtonStyle.None" Icon="fas fa-angle-down" Size="Size.ExtraSmall" OnClick="DownBtn"></Button>
    
</div>

@onclick:stopPropagation是阻止onclick的传播,如果需要阻止其它事件传播需要知道其它事件的触发原型。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值