Blazor中如何实现下拉菜单切换及点击外部关闭功能？

我使用TailwindUI的下拉菜单组件，已通过以下Blazor代码实现点击按钮切换菜单显示/隐藏：

@if (menuOpen)
{
    ....
}

@code {
    bool menuOpen;

    void ToggleMenu()
    {
        menuOpen = !menuOpen;
        StateHasChanged();
    }
}

现在需要实现点击页面其他区域时关闭菜单，但使用onblur事件会导致无法点击菜单项，以下是两种可行的解决方法：

方法一：使用文档点击事件委托（推荐） #

通过给document添加全局点击监听，判断点击目标是否属于下拉菜单容器，不属于则关闭菜单，同时处理事件冒泡避免误触发。

@implements IDisposable

<button @onclick="ToggleMenu" @onclick:stopPropagation="true">打开菜单</button>
@if (menuOpen)
{
    <div class="dropdown-container" @ref="dropdownRef">
        <!-- 菜单项示例 -->
        <button class="block w-full px-4 py-2 text-left">菜单项1</button>
        <button class="block w-full px-4 py-2 text-left">菜单项2</button>
    </div>
}

@code {
    bool menuOpen;
    ElementReference dropdownRef;
    private EventHandler<MouseEventArgs> _documentClickHandler;

    protected override void OnInitialized()
    {
        _documentClickHandler = HandleDocumentClick;
        document.AddEventListener("click", _documentClickHandler);
    }

    void ToggleMenu()
    {
        menuOpen = !menuOpen;
        StateHasChanged();
    }

    void HandleDocumentClick(object sender, MouseEventArgs e)
    {
        if (!dropdownRef.HasValue) return;
        
        var targetElement = e.Target as Element;
        if (targetElement != null && !dropdownRef.Value.Contains(targetElement))
        {
            menuOpen = false;
            InvokeAsync(StateHasChanged);
        }
    }

    public void Dispose()
    {
        document.RemoveEventListener("click", _documentClickHandler);
    }
}

关键说明： #

• @implements IDisposable：确保组件销毁时移除全局事件监听，避免内存泄漏
• @onclick:stopPropagation="true"：阻止按钮的点击事件冒泡到document，避免菜单刚打开就被关闭
• 通过ElementReference判断点击目标是否在下拉容器内，精准控制菜单关闭逻辑

方法二：利用焦点管理处理Blur事件 #

给菜单容器添加可聚焦属性，监听其onblur事件，通过RelatedTarget判断失去焦点的目标是否属于菜单内部，从而决定是否关闭菜单。

<button @onclick="ToggleMenu">打开菜单</button>
@if (menuOpen)
{
    <div class="dropdown-container" 
         tabindex="-1" 
         @ref="dropdownRef"
         @onblur="HandleMenuBlur">
        <!-- 菜单项示例 -->
        <button class="block w-full px-4 py-2 text-left">菜单项1</button>
        <button class="block w-full px-4 py-2 text-left">菜单项2</button>
    </div>
}

@code {
    bool menuOpen;
    ElementReference dropdownRef;

    void ToggleMenu()
    {
        menuOpen = !menuOpen;
        if (menuOpen)
        {
            // 延迟获取焦点，确保DOM已渲染完成
            _ = Task.Delay(10).ContinueWith(_ => 
            {
                _ = dropdownRef.FocusAsync();
            });
        }
    }

    void HandleMenuBlur(FocusEventArgs e)
    {
        var relatedTarget = e.RelatedTarget as Element;
        if (relatedTarget == null || !dropdownRef.Value.Contains(relatedTarget))
        {
            menuOpen = false;
            StateHasChanged();
        }
    }
}

关键说明： #

• tabindex="-1"：让菜单容器可聚焦但不参与键盘Tab导航
• 打开菜单后延迟调用FocusAsync：确保菜单DOM已渲染，能正确获取焦点
• RelatedTarget：判断失去焦点后焦点转移到的元素是否在菜单内，避免点击菜单项时误关闭菜单

内容的提问来源于stack exchange，提问作者M. Akar