MouseLeave 触发 Electron 中的子元素答案

【问题标题】：MouseLeave fires on child Elements in ElectronMouseLeave 触发 Electron 中的子元素
【发布时间】：2018-04-07 23:30:07
【问题描述】：

我正在使用以下 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 中防止这种情况发生？

【问题讨论】：

角度的版本？第一次悬停时它是否正常工作？
Angular4.进入和离开 controlArea 时事件会正确触发，但是当您将鼠标悬停在 Control Area 的任何子元素上时，mouseleaving 事件会在不应触发时再次触发。
我认为你可以添加到这些功能event.stopPropagation();
不幸的是，我无法找到一种方法，仅在移过子元素时停止 controlArea 的 mouseleave 传播，并在实际离开 ControlArea 时允许传播。
为什么不在 moveArea id 或自定义指令的时间上做呢。

标签： javascript html angularjs typescript electron

【解决方案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;
  }

【讨论】：