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

2021-10-18 乐帮网

blazor web assembly

在 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

关注我的微信公众号
在公众号里留言交流
投稿邮箱：1052839972@qq.com

庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮。门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力