在Blazor中如何设置event.PreventDefault来防止冒泡

在 JavaScript 中， event.preventDefault() 方法告诉浏览器不要执行默认操作。 事件继续像往常一样传播，除非它的事件侦听器之一调用 stopPropagation() 或 stopImmediatePropagation()，这两者中的任何一个都会立即终止传播。 

在 Blazor 中，不能直接使用 event.preventDefault()。 此外，必须同步调用此方法，这在 Blazor 服务器中是不可能的。 实际上，Blazor Server 异步处理事件，因为它需要使用 SignalR 连接将数据发送到服务器并等待响应。 因此，解决方案是使用@event_name:preventDefault="true"，这样Blazor 就可以在调用事件处理程序之前调用preventDefault 方法。 

<div @onclick="OnDivClick">
    <a href="https://www.meziantou.net"
       @onclick="OnAnchorClick"
       @onclick:preventDefault="true"   阻止默认事件，Url不会跳转，但是OnAnchorClick和OnDivClick都会执行
       @onclick:stopPropagation="true"> 停止冒泡传播使OnDivClick不再执行
         Sample
    </a>
</div>

@code {
    void OnAnchorClick() => Console.WriteLine("Anchor click");
    void OnDivClick() => Console.WriteLine("Div click"); // 如何使用了stopPropagation那么它就不会触发
}

除了以上方法你也可以使用以下方式来设置它的值

<a href="https://www.meziantou.net"
   @onclick="OnClick"
   @onclick:preventDefault="preventDefault">
  Sample
</a>

@code {
    bool preventDefault = false;
}

原文地址：https://www.meziantou.net/how-to-use-event-preventdefault-in-blazor.htm