Question

我有一个简单的问题，但我似乎无法找出任何解决方案。

基本上我有一个输入可以在聚焦时切换下拉列表，当它不再聚焦时它应该关闭下拉列表。

但问题是，如果单击下拉列表中的某个项目，blur函数将在项目的click函数之前执行，导致click函数不在点击注册之前关闭下拉列表以后运行。

我该如何解决这个问题？

<input (focus)="showDropdown()" (blur)="myBlurFunc()">
<ul>
  <li *ngFor="let item of dropdown" (click)="myClickFunc()">{{item.label}}</li>
</ul>

Answer 1

将您的点击事件替换为（ mousedown ）。 Mousedown事件在模糊之前称为。此代码应该正常工作：

<input (focus)="showDropdown()" (blur)="myBlurFunc()"> <ul> <li *ngFor="let item of dropdown" (mousedown)="myClickFunc()">{{item.label}}</li> </ul>

点击事件看起来像低优先级比模糊，所以它是模糊事件首先触发的可预测行为。

Answer 2

在下拉菜单元素中选择可以引起关注的选项-使用<a>或<button>或设置tabindex="-1"。然后，在您的onBlur处理程序中，检查event.relatedTarget。在onBlur处理程序中，relatedTarget是获得焦点的元素（如果有的话）。如果这是您下拉菜单中的选项之一，那么您现在知道不隐藏这些选项。

这比从onClick切换到onMouseDown更好，因为实际单击并不一定总是紧随mouseDown之后。如果您将鼠标向下移动，则将光标移开，然后将鼠标移至上方，则将触发鼠标向下，而不会触发任何点击。

Answer 3

这是解决这个问题的另一种方法，它不需要JS：

.menu {
  display: none;
}
.toggle:focus + .menu,
.toggle + .menu:active {
  display: block;
}

<button class="toggle">menu</button>
<ul class="menu">
  <li onClick="console.log('tacos')">tacos</li>
  <li onClick="console.log('burgers')">burgers</li>
</ul>

秘诀是不仅要针对 .toggle:focus 状态，还要针对 .menu:active 状态。

如何在模糊功能之前执行点击功能

3 个答案: