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部分

@code{
  private bool expandSubNavManage;
}

无论是onblur还是onfocusout都给我同样的问题，似乎它在注册导航触发器之前触发了“ on_”事件。如果删除onfocusout并单击一个链接，则该链接起作用。我尝试过使用延迟的解决方案，但我们的SM不想使用这种方法。

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

我希望为单击的导航项设置事件监听器，以将我发送到路径。请让我知道是否有某种方法可以不强制执行DELAY。

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>

* 免责声明：未经测试的代码

FYI-您可能应该知道的类似功能是“ preventDefault”功能。 this answer是针对JS的，答案很好地证明了这些差异-这些想法仍然适用于这些方法的Blazor版本。

onfocusout在导航触发之前运行

1 个答案: