Angular 6 如何正确使用 focusout 但在单击自身时阻止它执行

Question

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

我的目标是捕获 div 的点击以防止 focusout 执行（我无法阻止 focusout 触发但我可以在 focusout 调用的方法中放置一个 if 并检查我的条件，不管是什么，都在里面）。

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

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

Angular 6 如何正确使用 focusout 但在单击自身时阻止它执行

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

click

onclick

focusout

angular