如果点击,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,鼠标除去减去1但我想这可能很容易失去同步.

有更简单的方法吗？点击后我可以强制模糊运行吗？

Answer 1

我在这个问题中找到了答案:mousedown将在模糊之前发生,但点击将在之后发生.我只是改为

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

这给了我想要的事件的顺序,没有做延迟或鼠标是"引用计数"或者向DOM中的其他所有内容添加点击事件.