前言

在Blazor中，我們使用@on{DOM EVENT}="{DELEGATE}"這樣的Razor語法在組件標記中指定委托事件處理程序：

<button?@onclick="IncrementCount">Click?me</button>

但是沒有提供解除委托的方法。

比如，我們需要在某種條件下才執行事件處理：

有不有阻止事件觸發的方案呢？

常規解決方案

我們可以在委托事件處理程序中加上判斷：

<button?@onclick="()=>?{?if?(!checkedValue)?{?IncrementCount();?}?}">Click?me</button>

但是，如果有多個組件都需要加上這個判斷，這樣寫感覺比較繁瑣。

有不有更簡化的方法？

深入分析

在前面的文章中，我們已經知道Blazor組件實際上會編譯成C#語句。

在obj\Debug\net5.0\Razor\Pages目錄下，可以看到@onclick="IncrementCount"對應的代碼如下：

__builder.AddAttribute(13,?"onclick",Microsoft.AspNetCore.Components.EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this,?IncrementCount));

原來是創建了一個EventCallback事件回調。

在github上查找到EventCallback.Factory.Create的實現源碼^[1]：

private?EventCallback?CreateCore(object?receiver,?MulticastDelegate?callback) {return?new?EventCallback(callback?.Target?as?IHandleEvent????receiver?as?IHandleEvent,?callback); }

上面代碼的意思，如果callback的來源是IHandleEvent，則實際回調的是IHandleEvent實現。

也就是說，只需要組件繼承IHandleEvent，那么就可以控制組件上所有的事件回調了。

實現

修改代碼如下：

@implements?IHandleEventTask?IHandleEvent.HandleEventAsync(EventCallbackWorkItem?callback,?object?arg) {System.Console.WriteLine("HandleEven");return?callback.InvokeAsync(arg); }private?void?IncrementCount() {System.Console.WriteLine("Clicked...");currentCount++; }

運行后可以看到，確實先執行的HandleEventAsync，再執行的@onclick實現：

結論

通過本文，我們可以了解到，只要在組件上繼承IHandleEvent，就可以實現全局截獲事件回調。

但是，你會發現有一個問題，Current count沒有發生變化！

這是為什么呢？請聽下回分解！

參考資料

[1]

實現源碼: https://github.com/dotnet/aspnetcore/blob/main/src/Components/Components/src/EventCallbackFactory.cs

總結

以上是生活随笔為你收集整理的Hello Blazor：(11)全局截获事件执行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。