Angular 6如何正确使用焦点但在单击时阻止它执行

Question

我有一个关于stackblitz的问题的演示，你可以试试：https://stackblitz.com/edit/angular-gitter-u7erfg?file=app%2Fapp.component.ts

我的目标是让一个div点击被抓住以防止焦点执行（我不能阻止焦点出来，但是我可以告诉地方如果使用focusout调用的方法并检查我的条件，无论它是什么，那里）。

或者，或者，是否有另一种方法可以实现类似的，如果更好的结果？

Answer 1

怎么样：stackblitz

基本上它使用mousedown来防止默认的focusout事件。选择文件后，它会关闭绿色方块：

export class AppComponent  {
  opened = false;
  dostuff = false;

  toggle(){
    this.opened = !this.opened
    if(!this.opened) this.dostuff = false;
  }


  mouseInside(event){
    this.dostuff = true;
    event.preventDefault();
  }

  focusOut(){
    if (!this.dostuff) {
      this.opened = false;
    }
  }

  onFileChange(event) {
    this.opened = false;
    this.dostuff = false;
  }
}