如何在 Blazor Server 应用程序中停止事件传播 [英] How to stop event propagation in Blazor Server app

问题描述

我正在使用 Grid.Blazor 在 Blazor 应用程序上呈现服务器端网格的库.其中一列有一个带有点击事件的按钮.因此，当单击按钮时，网格行事件也会与按钮单击事件一起被触发.我想停止事件传播，只让按钮点击事件被触发.

网格:

 <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid" OnRowClicked="@(async (item) => await ExerciseDetails(item))"></网格组件>动作<IGridColumnCollection<QuickExcerciseLists>>列 = c =>{c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs().SetWidth("15%");};

自定义列组件:

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>

我尝试在子按钮组件中传递 @onclick:stopPropagation.但是下面给出了编译错误.

<块引用>

组件参数'onclick'为此使用了两次或更多次成分.参数必须是唯一的(不区分大小写).组件参数onclick"由@onclick:stopPropagation"生成指令属性.

我正在运行 .Net 核心 3.1.201.任何帮助表示高度赞赏.

解决方案

如果它有帮助，并添加到@Ivan 为似乎对我不起作用的 MatBlazor MatButton/MatIconButton 所做的评论中，我使用了以下解决方法:

<MatButton OnClick="@DoSomething";@ref=MyButton">做吧！</MatButton>

我需要同时使用 stopPropagation 和 preventDefault.我不得不使用 div 包装器，因为 MatButton 不允许我添加多个点击.

I'm using Grid.Blazor library to render server side grid on Blazor app. One of the column has a button with click event. So when button is clicked then grid row event is also fired along with button click event. I want to stop event propagation and only let button click event fired.

Grid:

  <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid"  OnRowClicked="@(async (item) => await ExerciseDetails(item))"></GridComponent>


Action<IGridColumnCollection<QuickExcerciseLists>> columns = c =>
        {
            c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");
            c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");
            c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");
            c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs<MatTooltip>().SetWidth("15%");
        };

Custom Column Component :

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>

I tried passing @onclick:stopPropagation in the child button component. But it's given below compile error.

The component parameter 'onclick' is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter 'onclick' is generated by the '@onclick:stopPropagation' directive attribute.

I'm running .Net core 3.1.201. Any help is highly appreciated.

解决方案

In case it helps, and to add to the comment @Ivan made for the MatBlazor MatButton/MatIconButton which didn't seem to work for me, I used the following workaround:

<div @onclick:stopPropagation="true" @onclick:preventDefault="true">
  <MatButton OnClick="@DoSomething" @ref="MyButton">Do it!</MatButton>
</div>

I needed to use both stopPropagation and preventDefault. I had to use the div wrapper as MatButton didn't allow me to add multiple onclicks.

这篇关于如何在 Blazor Server 应用程序中停止事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！