Blazor下拉菜单点击事件处理优化：替代延迟方案探讨

方案1：全屏遮罩层拦截外部点击（纯Blazor无JS） #

这是最省心的纯Blazor方案，完全规避blur和点击事件的顺序冲突：

• 菜单展开时，渲染一个全屏透明遮罩，层级低于菜单，点击遮罩就关闭菜单。
• 菜单项层级高于遮罩，点击时不会触发遮罩的点击事件，因此菜单不会提前关闭，页面跳转等点击逻辑能正常执行。

代码示例：

<div class="dropdown-wrapper">
    <button @onclick="ToggleMenu">下拉菜单</button>
    @if (IsMenuOpen)
    {
        <!-- 全屏遮罩，点击关闭菜单 -->
        <div class="dropdown-backdrop" @onclick="CloseMenu"></div>
        <!-- 下拉菜单，层级高于遮罩 -->
        <div class="dropdown-menu">
            <NavLink href="/counter" @onclick="CloseMenu">Counter</NavLink>
            <NavLink href="/fetchdata" @onclick="CloseMenu">Fetch Data</NavLink>
        </div>
    }
</div>

<style>
.dropdown-wrapper {
    position: relative;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 99;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    padding: 8px;
    background: white;
    border: 1px solid #eee;
}
</style>

@code {
    private bool IsMenuOpen { get; set; }

    private void ToggleMenu() => IsMenuOpen = !IsMenuOpen;
    private void CloseMenu() => IsMenuOpen = false;
}

方案2：检查焦点目标归属（需少量JS） #

如果坚持用focusout事件，可在事件处理时判断新焦点是否属于菜单内部元素：

• 通过JS获取当前焦点元素，检查它是否是菜单的子元素。
• 只有当焦点不在菜单内时，才关闭菜单。

代码示例：

<button @onclick="ToggleMenu" @onfocusout="HandleFocusOut">下拉菜单</button>
@if (IsMenuOpen)
{
    <div class="dropdown-menu" @ref="MenuRef">
        <a href="/counter">Counter</a>
        <a href="/fetchdata">Fetch Data</a>
    </div>
}

@code {
    private bool IsMenuOpen { get; set; }
    private ElementReference MenuRef { get; set; }

    private void ToggleMenu() => IsMenuOpen = !IsMenuOpen;

    private async Task HandleFocusOut(FocusEventArgs e)
    {
        var activeElement = await JS.InvokeAsync<ElementReference>("document.activeElement");
        var isInMenu = await JS.InvokeAsync<bool>(@"
            (parent, child) => parent.contains(child)
        ", MenuRef, activeElement);

        if (!isInMenu)
        {
            IsMenuOpen = false;
            StateHasChanged();
        }
    }
}

如果不得不使用延迟，按以下逻辑设置时长：

1. 基础值：主流浏览器中blur到点击事件的间隔通常在10-50ms，设置100ms是安全值，既能覆盖绝大多数场景，又不会让用户察觉延迟。
2. 测试优化：在目标浏览器（Chrome、Edge、Firefox等）中实际测试，逐步降低延迟直到刚好能稳定捕获点击事件，比如部分环境下50ms就足够。
3. 避免过长：不要超过200ms，否则用户会感觉到菜单关闭有明显卡顿。

同时建议加上取消逻辑，避免快速点击时的冲突：

<button @onclick="ToggleMenu" @onblur="HandleBlur">下拉菜单</button>
@if (IsMenuOpen)
{
    <div class="dropdown-menu">
        <a href="/counter">Counter</a>
        <a href="/fetchdata">Fetch Data</a>
    </div>
}

@code {
    private bool IsMenuOpen { get; set; }
    private CancellationTokenSource? _delayCts;

    private void ToggleMenu()
    {
        IsMenuOpen = !IsMenuOpen;
        _delayCts?.Cancel(); // 取消之前的延迟关闭逻辑
    }

    private async Task HandleBlur()
    {
        _delayCts = new CancellationTokenSource();
        try
        {
            await Task.Delay(100, _delayCts.Token);
            IsMenuOpen = false;
            StateHasChanged();
        }
        catch (OperationCanceledException)
        {
            // 延迟被取消，不执行关闭
        }
    }
}

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