如何在 Blazor 服务器应用程序中停止事件传播

Question

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

网格：

  <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%");
        };

自定义列组件：

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

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

该组件的组件参数“onclick”使用两次或多次。参数必须是唯一的（不区分大小写）。组件参数“onclick”由“@onclick:stopPropagation”指令属性生成。

我正在运行.Net core 3.1.201。非常感谢任何帮助。

Answer 1

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

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

我需要同时使用 stopPropagation 和 PreventDefault。我必须使用 div 包装器，因为 MatButton 不允许我添加多个 onclick。

Answer 2

我在使用扩展器时也遇到了类似的问题。我希望能够单击扩展器行内的按钮，而无需扩展该行。我能够通过在 C# 代码中使用@onmousedown并在窗口事件调用中使用 onclick来实现此目的

 <a class="text-primary" @onmousedown="() => MyModal.Open()" onclick="event.stopPropagation()"> Button </a>

Answer 3

我在使用 Table 时遇到了完全相同的问题。看来现在 MatBlazor 按钮有办法停止传播：OnClickStopPropagation="true"

以下代码对我有用，带有MatIconButton和MatButton：

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" OnClick="@ShowData" OnClickStopPropagation="true"></MatBlazor.MatButton>