Blazor中如何实现点击div外部区域时隐藏/禁用指定div？

左右排布场景的最简实现 #

不需要引入任何JS依赖，直接用Blazor内置的事件机制就能实现，逻辑无冗余：

1. 给最外层的布局容器绑定点击事件
2. 给左侧目标div加@onclick:stopPropagation，阻止内部点击事件冒泡到外层
3. 外层容器的点击事件触发时，直接修改状态隐藏左侧div即可

Razor代码示例：

@* 外层flex容器实现左右布局 *@
<div class="w-full h-screen flex" @onclick="HideLeftPanel">
    @if (showLeftPanel)
    {
        @* 左侧面板阻止点击冒泡，点击自身区域不会触发外层的关闭逻辑 *@
        <div class="w-64 h-full bg-gray-50 p-4 border-r" @onclick:stopPropagation>
            左侧菜单/面板内容
        </div>
    }

    @* 右侧区域点击会自然冒泡到外层容器，触发关闭 *@
    <div class="flex-1 h-full p-6">
        右侧主内容区
        <button @onclick="() => showLeftPanel = true" class="px-3 py-1 bg-blue-500 text-white rounded">
            打开左侧面板
        </button>
    </div>
</div>

对应逻辑代码：

@code {
    private bool showLeftPanel = true;

    private void HideLeftPanel()
    {
        showLeftPanel = false;
    }
}

这个方案性能最好，没有额外的事件监听开销，组件销毁时不需要做额外清理，不会出现内存泄漏。

点击外部关闭/禁用元素的通用方案 #

如果项目里有大量类似场景（下拉菜单、弹窗、悬浮提示、右键菜单等），可以封装成通用逻辑，不用每个页面重复写代码。
通用方案核心规则：

• 普通文档流内的元素优先用事件冒泡实现，不要滥用全局JS监听
• 脱离文档流的浮层类元素，用JS做点击位置判断时，必须在组件销毁时主动解绑事件，避免内存泄漏
• 不要硬写反向判断逻辑，优先判断点击落点是否在目标元素范围内，避免层级问题导致的误触发

可复用的外部点击检测组件 #

封装完成后可以套在任意需要监听外部点击的元素上，传入触发回调即可：

1. 先写组件ClickOutsideDetector.razor：

@implements IAsyncDisposable
<div @ref="targetRef">
    @ChildContent
</div>

@code {
    [Parameter, EditorRequired]
    public RenderFragment? ChildContent { get; set; }

    [Parameter, EditorRequired]
    public EventCallback OnClickOutside { get; set; }

    private ElementReference targetRef;
    private IJSObjectReference? jsModule;
    private DotNetObjectReference<ClickOutsideDetector>? dotNetRef;

    [Inject]
    private IJSRuntime JS { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            dotNetRef = DotNetObjectReference.Create(this);
            jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/clickOutside.js");
            await jsModule.InvokeVoidAsync("bind", targetRef, dotNetRef);
        }
    }

    [JSInvokable]
    public async Task HandleClickOutside()
    {
        await OnClickOutside.InvokeAsync();
    }

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.InvokeVoidAsync("unbind", targetRef);
            await jsModule.DisposeAsync();
        }
        dotNetRef?.Dispose();
    }
}

2. 新增配套JS文件wwwroot/js/clickOutside.js：

export function bind(target, dotNetRef) {
    target.handler = (e) => {
        if (!target.contains(e.target)) {
            dotNetRef.invokeMethodAsync('HandleClickOutside');
        }
    }
    document.addEventListener('click', target.handler);
}

export function unbind(target) {
    document.removeEventListener('click', target.handler);
    delete target.handler;
}

3. 组件使用示例（以左侧面板场景为例）：

<div class="w-full h-screen flex">
    @if (showLeftPanel)
    {
        <ClickOutsideDetector OnClickOutside="() => showLeftPanel = false">
            <div class="w-64 h-full bg-gray-50 p-4 border-r">
                左侧面板内容
            </div>
        </ClickOutsideDetector>
    }
    <div class="flex-1 h-full p-6">
        右侧主内容区
        <button @onclick="() => showLeftPanel = true" class="px-3 py-1 bg-blue-500 text-white rounded">
            打开左侧面板
        </button>
    </div>
</div>

注意：如果目标元素内部有需要阻止冒泡的特殊交互，直接给对应子元素加@onclick:stopPropagation即可，不会影响组件的判断逻辑。

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