无法取消订阅JavaScript键盘事件：Blazor场景下的解决方案求助

要实现键盘事件的取消注册，核心是保留事件处理函数的引用——因为removeEventListener必须传入和addEventListener时完全相同的函数实例才能生效，匿名函数做不到这一点。以下是修改后的完整代码：

修改后的JavaScript代码 #

window.JsFunctions = {
    // 存储事件处理函数的引用，用于后续移除
    _keyDownHandler: null,
    
    AddKeyboardListenerEvent: function (_) {
        let serializeEvent = function (e) {
            if (e) {
                return {
                    key: e.key,
                    code: e.keyCode.toString(),
                    location: e.location,
                    repeat: e.repeat,
                    ctrlKey: e.ctrlKey,
                    shiftKey: e.shiftKey,
                    altKey: e.altKey,
                    metaKey: e.metaKey,
                    type: e.type
                };
            }
        };
        
        // 先移除已存在的监听（避免重复注册）
        if (this._keyDownHandler) {
            window.document.removeEventListener('keydown', this._keyDownHandler);
        }
        
        // 创建命名的事件处理函数并保存引用
        this._keyDownHandler = function (e) {
            DotNet.invokeMethodAsync('ClassName', 'JsKeyDown', serializeEvent(e))
        };
        
        // 注册事件
        window.document.addEventListener('keydown', this._keyDownHandler);
    },
    
    RemoveKeyboardListenerEvent: function (_) {
        // 检查是否存在已注册的处理函数
        if (this._keyDownHandler) {
            window.document.removeEventListener('keydown', this._keyDownHandler);
            // 清空引用，避免内存泄漏
            this._keyDownHandler = null;
        }
    }
};

Blazor端调用方式 #

• 注册事件（和之前一致）：

  await JsRuntime.InvokeVoidAsync("JsFunctions.AddKeyboardListenerEvent");
  

• 取消注册事件：

  await JsRuntime.InvokeVoidAsync("JsFunctions.RemoveKeyboardListenerEvent");
  

关键说明 #

1. 在AddKeyboardListenerEvent中增加了重复注册判断，避免多次调用导致多个监听同时生效
2. 将事件处理函数赋值给JsFunctions._keyDownHandler，确保移除时能拿到同一个函数引用
3. 取消注册后清空_keyDownHandler，防止内存泄漏

内容的提问来源于stack exchange，提问作者MemphiZ