文章/答案/技术大牛

发布

社区首页 >问答首页 >在导航触发器之前运行onfocusout

问在导航触发器之前运行onfocusout
EN

Stack Overflow用户

提问于 2020-10-23 18:02:02

回答 1查看 1.7K关注 0票数 0

我正在经历的问题，触发下拉式导航时，与onblur或焦点输出在布拉佐尔。

剃须刀页面的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;
    }
}

我希望有一个事件侦听器为我点击的导航项目发送我到一个路径。请让我知道，如果有办法做到这一点，不受强迫的拖延。

onfocusout

html

css

razor

blazor

回答 1

Stack Overflow用户

发布于 2020-10-23 23:42:27

听起来，您需要添加stopPropagation，以防止焦点事件在层次结构上“传播”，并在顶级li元素中命中事件处理程序。

在上面链接的Microsoft docs示例中，它们显示了一个停止@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“函数。虽然这个答案是针对JS的，但答案很好地展示了这些方法的不同之处--这些想法仍然适用于这些方法的Blazor版本。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64505168

复制

相似问题

问在导航触发器之前运行onfocusout
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在导航触发器之前运行onfocusoutEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在导航触发器之前运行onfocusout
EN