如何在 Blazor Server 应用程序中停止事件传播

问题描述

我正在使用 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.

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 应用程序中停止事件传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！