onfocusout在导航触发之前运行

Question

在blazor中使用onblur或onfocusout时，我遇到了触发下拉菜单导航的问题。

剃须刀页面的HTML:

<div class="navbar-collapse d-md-inline-flex flex-md-row-reverse">
<ul class="navbar-nav ml-auto">
<li class="nav-item" @onmousedown="e => this.expandSubNavManage = true" @onfocusout="e => this.expandSubNavManage = false">
<div class="dropdown">
<button class="dropdown-button" aria-labelledby="dropdownMenuButton">
<div class="nav-link dropdown-toggle @(expandSubNavManage ? "show" : "")" data-toggle="Manage" role="button" aria-haspopup="true" aria-expanded="false">Manage<SvgImage SvgType="SvgType.CaretDown"></SvgImage></div>
</button>
@if (expandSubNavManage)
{
<div class="dropdown-menu" aria-labelledby="dropdownMenu" >
<ul class="nav flex-column">
<li class="btn-group" role="group" aria-label="btn-group-toggle">
<button type="button" class="btn btn-secondary focus" aria-pressed="true">District</button>
<button type="button" class="btn btn-secondary">Campus</button>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="District/Dashboard">
<span class="mr-2 svg-style">
<SvgImage SvgType="SvgType.Dashboard" SvgClass="svg-style"></SvgImage>
</span>
Dashboard
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="District/DataManagement">
<span class="mr-2">
<SvgImage SvgType="SvgType.Data" SvgClass="svg-style"></SvgImage>
</span>
Data Management
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="District/AutoPilot">
<span class="mr-2">
<SvgImage SvgType="SvgType.AutoPilot" SvgClass="svg-style"></SvgImage>
</span>
Auto Pilot
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="District/PerformanceTracker">
<span class="mr-2">
<span>
<SvgImage SvgType="SvgType.PerformanceTracker" SvgClass="svg-style"></SvgImage>
</span>
</span>
Performance Tracker
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="District/Tests">
<span class="mr-2 ">
<SvgImage SvgType="SvgType.Booklet" SvgClass="svg-style"></SvgImage>
</span>
Tests
</NavLink>
</li>
</ul>
</div>
}
</div>
</li>
</ul>

和@代码段

@code{
private bool expandSubNavManage;
}

无论是onblur还是onfocusout都给了我同样的问题，似乎它触发了"；on_"；事件，然后再注册导航触发器。如果我删除onfocusout并单击链接，链接就会起作用。我尝试过使用延迟的解决方案，但我们的SM不想使用这种方法。

@code{
private async Task OutFocusManage()
{
await Task.delay(50);
this.expandSubNavManage = false;
}
}

我希望为我点击的导航项目提供一个eventlistener，将我发送到一个路径。请告诉我是否有办法在不强制延迟的情况下做到这一点。

Answer 1

听起来你需要添加stopPropagation来保持焦点事件；传播"；向上移动层次结构，并在顶部li元素中点击事件处理程序。

在上面链接的Microsoft文档示例中，它们显示了一个停止@onclick:传播的示例

<div @onclick="OnSelectParentDiv">
<div @onclick="OnSelectChildDiv" @onclick:stopPropagation="true">
Child div that stops propagation when selected.
</div>
</div>

在该示例中，父div的@onclick处理程序将不会被命中。

你需要做同样的事情——只需要使用@onfocusout。

每个NavLink上的代码看起来像

<NavLink class="nav-link" href="District/Dashboard" @onfocusout:stopPropagation="true">
(your content here)
</NavLink>

*免责声明：未测试代码

仅供参考-你可能应该知道的一个类似的功能是"；preventDefault"；作用虽然这个答案是针对JS的，但这个答案很好地证明了差异——这些想法仍然适用于这些方法的Blazor版本。