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

Questions:

I am handling mouse hover events using the following HTML template and script. My app is written using AngularJS and hosted in 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;
 }

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?

Answers:

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.

 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;
  }