Überprüfen, ob die Maus einen bestimmten Teil des Fensters verlassen hat

Question

Ist es möglich zu wissen, ob die Maus einen bestimmten Teil des Fensters verlassen hat? Die Werte sind unten angegeben:

var cursorX; 
var cursorY; 
document.onmousemove = function(e){ 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
} 
document.addEventListener('mouseout', function(e) { 
    var dims = elem.getBoundingClientRect(); 
    var top = window.scrollY + dims.top; 
    var left = dims.left; 
    var width = dims.width; 
    var bottom = dims.height; 
    if (what condition should be here) { 
     console.log('yes mouse has left that portion') 
     document.getElementById('div-in-the-end-of-body').style .display = 'none'; 
    } 
}); 

Zum Beispiel Werte von dimmt in Konsolenprotokoll sind ClientRect {top: 155.375, right: 621, bottom: 540.375, left: 313, width: 308…}

Hier ist visuelle, was ich zu erreichen bin versucht.

Edit: Das div am Ende des Körpers hat absolute Position und es schwebt auf den Bildern. Wenn ich bei diesen div-Bildern schwebe, beachte, dass die Maus es verlassen hat und das div versteckt. Dies ist der Grund, warum ich es so machen möchte.

Edit # 2: Hier ist die Lösung

elem.onmouseout=function(){ 
    var dims = this.getBoundingClientRect(); 
     var top = window.scrollY + dims.top; 
     var left = dims.left; 
     var width = dims.width; 
     var bottom = dims.height; 
    if(top > 10 || left > 10 || width > 10 || bottom > 10){ 
      document.getElementById('div-in-the-end-of-body').style .display = 'none'; 
    } 
} 

Answer 1

Werfen Sie einen Blick auf die mouseout Ereignis. Alternativ könnten Sie capture mouse events sobald Ihre Maus Ihre spezifische Region eingegeben hat.

Answer 2

Sie können Ereignis-Listener an die "Regionen" binden, die Sie überprüfen möchten. Da Ihre Regionen Objekte in JavaScript sind, sind Ereignis-Listener eingebaut oder Sie können mit obj.call Funktionen aufrufen, die nicht zu dem von Ihnen erstellten Objekt gehören. Zum Beispiel

let rects[] // this is your list of regions 
 

 
for (let rect of rects) { 
 
    rect.onMouseMove((e) => { 
 
    // do something when mouse cursor is moving 
 
    }) 
 

 
    rect.onMouseEnter((e) => { 
 
    // do somthing when mouse cursor enters the area 
 
    }) 
 

 
    rect.onMouseLeave((e) => { 
 
    // do something when mouse cursor exits the area 
 
    }) 
 
}

Answer 3

Ok, ich habe die Lösung herausgefunden. Hier ist Arbeitscode für diejenigen, die brauchen könnten.

elem.onmouseout=function(){ 
    var dims = this.getBoundingClientRect(); 
     var top = window.scrollY + dims.top; 
     var left = dims.left; 
     var width = dims.width; 
     var bottom = dims.height; 

    if(top > 10 || left > 10 || width > 10 || bottom > 10){ 
      console.log('yay!! ship has left the dock') 
    } 
}