javascript - MouseLeave触发 Electron 中的子元素

Question

我正在使用以下HTML模板和脚本处理鼠标悬停事件。我的应用是使用AngularJS编写的，并托管在Electron中。

HTML:

<div id="controlArea" 
     (mouseenter) = "onControlAreaEnter()" 
     (mouseleave) = "onControlAreaLeave($event)">
    <div id="moveArea" *ngIf="controlsVisible">
        <img src="assets/Icons/move.png" height="32" width="32"/>
    </div>
</div>

typescript :

 onControlAreaEnter(){
    this.controlsVisible = true;
 }
 onControlAreaLeave(event){    
    this.controlsVisible = false;
 }

当我通过Chrome浏览器查看应用程序时，仅当我离开controlArea div时才会触发。但是，当我将应用程序放入 Electron 菜单时，将鼠标悬停在子div元素上时，mouseleave被触发。有什么方法可以防止在Electron中发生这种情况？

Answer 1

使用当前的变通办法来滤除请假事件在controlArea内部发生时。但是，这并不能解释为什么在Electron的子元素上发生离开事件。

 onControlAreaLeave(event){
    // Check to see if we went to a child element 
    // Only need this because of Electron otherwise it works fine in browsers
    if (event.clientX > 4 && 
        event.clientX < window.innerWidth && 
        event.clientY > 4 && 
        event.clientY < this.controlArea.nativeElement.offsetHeight) {
       return;
    }

    this.controlsVisible = false;
  }