如何在模糊功能之前执行点击功能 [英] How to execute click function before the blur function

问题描述

我有一个简单的问题，但是我似乎找不到任何解决办法.

I've got a simple issue but I can't seem to figure out any solution.

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

Basically I've got an input that toggles a dropdown when focused, and when it's not focused anymore it should close the dropdown.

但是，问题是，如果单击下拉菜单中的某个项目，则会在该项目的click函数之前执行blur函数，从而导致click函数自下拉菜单起就根本不运行在点击被注册之前关闭.

However, the problem is that if you click on an item in the dropdown, the blur function is executed before the click function of the item, causing the click function not to run at all since the dropdown closes before the click is registered.

我该如何解决?

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

推荐答案

将鼠标单击事件替换为( mousedown ).鼠标按下事件称为 before (模糊之前).这段代码应该可以正常工作:

Replace your click event with (mousedown). Mousedown event is called before blur. This code should works properly:

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

看起来点击事件的优先级比模糊事件低，因此可预测的行为是模糊事件首先触发.

It looks like click event has lower priority than blur, so it is predictible behaviour that blur event fires first.

这篇关于如何在模糊功能之前执行点击功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！