Home » Javascript » MouseLeave fires on child Elements in Electron

MouseLeave fires on child Elements in Electron

Posted by: admin November 1, 2017 Leave a comment


I am handling mouse hover events using the following HTML template and script. My app is written using AngularJS and hosted in Electron.


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


    this.controlsVisible = true;
    this.controlsVisible = false;

When I view my app through chrome mouseleave is only fired when I leave the controlArea div. However when I put my app into electron mouseleave is fired when I hover onto the child div element. Is there a way to prevent this from happening in Electron?


Using a current workaround to filter out leave events when they occur inside the controlArea. This however doesn’t explain why leave events are occuring on child elements in Electron.

    // 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) {

    this.controlsVisible = false;