鼠标离开事件在模糊事件后失败

Question

我对鼠标离开事件有问题：当我第一次加载页面时，mouseleave 事件工作得很好，但是当我单击搜索栏(单击事件(，然后单击外部(模糊事件(时，鼠标离开在下一个悬停后停止工作(鼠标悬停事件(，即搜索栏不会缩小(并且控制台不会打印"离开"(

网页代码

<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。