模糊事件后 onmouseleave 事件失败

Question

我有一个 mouseleave 事件的问题：当我第一次加载页面时，mouseleave 事件工作正常但是当我点击 searchBar（点击事件），然后点击外部（模糊事件）时，mouseleave 在下一次悬停后停止工作（ mouseover 事件）即 searchBar 不收缩（并且控制台不打印 "leaving"）

HTML代码

<input type="text" id="searchBar" title="Chercher un projet" (mouseover)="handleHover()" (mouseleave)="handleLeave()" (click)="handleClick()" (blur)="handleBlur()" >

打字稿代码

export class NavBarComponent implements OnInit {
  isFocused: boolean;
  constructor(public router: Router) {
  }
  ngOnInit() {
    this.isFocused = false;
  }
  goTo(url: string) {
    this.router.navigate(['/' + url]);
  }
  handleLeave(){
    if(!this.isFocused) {
      $('#searchBar').stop(true, false);
      console.log("leaving");
      $('#searchBar').animate({width: 0}, 800);
    }
  }
  handleHover(){
    console.log("hovering");
    console.log($('#searchBar').is(':hover'));
    $('#searchBar').animate({width: 117}, 800);
  }
  handleClick(){
    this.isFocused = true;
  }
  handleBlur(){
    var s  = (<HTMLInputElement>document.getElementById("searchBar")).value;
    if(s === ""){
      $('#searchBar').stop(true, false);
      console.log("blurring")
      $('#searchBar').animate({width: 0}, 800);
    }
  }

Answer 1

在 handleBlur() 方法中将 this.isFocused 设置回 false。

模糊事件后 onmouseleave 事件失败

onmouseleave event fails after blur event

html

javascript

blur

mouseleave

typescript