Blazor:Razor组件防止点击穿透

文章目录

  • 微软官方文档
  • 如何防止点击传统

微软官方文档

Blazor:Razor组件防止点击穿透_第1张图片

如何防止点击传统

我们就算封装成立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的传播,如果需要阻止其它事件传播需要知道其它事件的触发原型。

你可能感兴趣的:(Blazor基础知识,Blazor)