angular - Angular 6 how to correctly utilize focusout but prevent it's execution when clicking itself

Question

I have a demo of my issue on a stackblitz that you can try out : https://stackblitz.com/edit/angular-gitter-u7erfg?file=app%2Fapp.component.ts

My goal is to have a div who's click is caught to prevent focusout execution (I can't prevent focusout from firering but I can place an if within the method called by focusout and check my condition, whatever it is, in there).

Or, aternatively, is there another method that could accomplish similar, if better, results?

Answer 1

这个怎么样：stackblitz

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

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;
  }
}