如果单击鼠标，Angular2自己的下拉菜单会隐藏吗? [英] Angular2 roll-my-own dropdown hide if clicking away?

问题描述

我有一个 div ，我想显示/隐藏在 input 的焦点/模糊上.这是我正在尝试的简化版本:

I have a div that I want to show/hide on focus/blur of an input. Here's a simplified version of what I'm trying:

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
  </ul>
</div>

此 div 包含要单击的元素列表.我的问题是，在单击 li 之前，发生 input 的模糊.

This div contains a list of elements to click on. My problem is that the input's blur is happening before the li's click.

我想保持简单.我不想设置所有焦点或单击事件来设置 ShowDropDown = false ，但我需要保持下拉div处于打开状态以进行交互.

I want to keep things simple. I don't want to set everything's focus or click event to set ShowDropDown=false but I need to keep the dropdown div open for interaction.

我可以让 ShowDropDown 是一个数字，其中焦点加1，在div上鼠标加1，模糊输入减去1，在div上鼠标减1，但我想象一下，它真的很容易变得不同步.

I could have ShowDropDown be a number where focusing adds 1 to it, mousing over the div adds another 1 to it, blurring the input subtracts 1, and mousing out of the div subtracts 1 but I imagine that could go out of sync really easily.

有没有更简单的方法可以做到这一点?单击后是否可以强制模糊运行?

Is there a simpler way to do this? Can I force blur to run after click?

推荐答案

我在

I found the answer in this question: mousedown will happen before blur but click will happen after. I simply change to

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
    <li (mousedown)="...">...</li>
  </ul>
</div>

这为我提供了所需的事件顺序，而无需进行延迟或引用计数"，而无需在鼠标所在的位置或向DOM中的其他所有内容添加click事件.

This gives me the order of events I want without doing delays or "reference counting" where the mouse is or adding a click event to everything else in the DOM.

这篇关于如果单击鼠标，Angular2自己的下拉菜单会隐藏吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！