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>

打字稿：

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

当我通过chrome mouseleave查看我的应用程序时，只有在我离开controlArea div时才会触发。然而，当我将我的应用程序放入电子时，当我将鼠标悬停在子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;
  }

MouseLeave触发Electron中的子元素

1 个答案: