Blazor Server应用中如何监听页面点击（排除按钮）并触发方法

原代码存在的问题 #

1. 按钮子元素点击未被排除：仅判断e.target.tagName会导致点击按钮内部的子元素（如图标、文本span）时，仍触发目标方法，不符合“点击按钮除外”的需求。
2. 实例方法调用失败：直接使用DotNet.invokeMethodAsync调用组件实例方法时，未传递组件实例引用，导致无法正确触发.NET端方法。

修正后的实现代码 #

1. 更新_host.cshtml中的JavaScript脚本

// 保存事件处理函数引用，方便后续移除
let clickHandler;

window.addDocumentClickListener = (dotNetRef) => {
  clickHandler = function (e) {
    // 向上遍历DOM树，检查点击目标是否属于按钮元素
    let isButton = false;
    let currentElement = e.target;
    while (currentElement) {
      if (currentElement.tagName.toLowerCase() === 'button') {
        isButton = true;
        break;
      }
      currentElement = currentElement.parentElement;
    }

    if (!isButton) {
      // 通过组件实例引用调用.NET方法
      dotNetRef.invokeMethodAsync('HandleMouseClick');
    }
  };
  document.addEventListener('click', clickHandler);
};

// 添加移除事件监听的方法，避免内存泄漏
window.removeDocumentClickListener = () => {
  if (clickHandler) {
    document.removeEventListener('click', clickHandler);
    clickHandler = null;
  }
};

2. 修改Razor页面代码

@inject IJSRuntime JS
@* 实现异步释放接口，清理资源 *@
@implements IAsyncDisposable

<!-- 你的页面内容 -->

@code {
    private DotNetObjectReference<当前组件类名>? _componentRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 创建当前组件的.NET对象引用，传递给JavaScript
            _componentRef = DotNetObjectReference.Create(this);
            await JS.InvokeVoidAsync("addDocumentClickListener", _componentRef);
        }
    }

    [JSInvokable]
    public void HandleMouseClick()
    {
        // 执行你的点击逻辑
        Action_On_Mouseclick();        
    }

    // 组件销毁时释放资源，移除事件监听
    public async ValueTask DisposeAsync()
    {
        _componentRef?.Dispose();
        await JS.InvokeVoidAsync("removeDocumentClickListener");
    }
}

关键说明 #

• DOM遍历判断：通过向上遍历点击元素的父节点，确保所有按钮及其内部元素的点击都被排除。
• 组件实例引用：使用DotNetObjectReference将组件实例传递给JavaScript，确保能正确调用组件的实例方法。
• 资源清理：实现IAsyncDisposable接口，在组件销毁时移除事件监听并释放引用，避免Blazor Server中的内存泄漏问题。

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