如果点击离开，Angular2 滚动我自己的下拉菜单隐藏？

Question

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

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

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

我想让事情变得简单。我不想设置所有内容的焦点或点击事件来设置 ShowDropDown=false 但我需要保持下拉 div 打开以进行交互。

我可以让 ShowDropDown 成为一个数字，其中聚焦加 1，鼠标悬停在 div 上再加 1，模糊输入减 1，鼠标移出 div 减 1，但我想象一下，这很容易就会不同步。

有没有更简单的方法来做到这一点？我可以在点击后强制运行模糊吗？

Answer 1

我在 this question 中找到了答案: mousedown 会在 blur 之前发生，但 click 会在 blur 之后发生。我只是改成

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

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