檢查鼠標是否離開窗口的特定部分

Question

是否有可能知道鼠標是否離開了窗口的特定部分？該數據如下：

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

對於控制檯日誌DIMS的例子值ClientRect {top: 155.375, right: 621, bottom: 540.375, left: 313, width: 308…}

這裏是視覺的就是我想要的目的。

編輯：該分區在身體的末端具有絕對位置和它懸停在圖像上。如果我將鼠標懸停在該div圖像上，請考慮鼠標離開它並隱藏div。這就是我想這樣做的原因。

編輯＃2：下面是解

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

看一看的mouseout事件。或者，只要鼠標進入特定區域，就可以使用capture mouse events。

Answer 2

您可以將事件偵聽器綁定到要檢查的「區域」。由於您的區域是javascript中的對象，因此可以使用內置的事件偵聽器，或者您可以使用obj.call調用不屬於您創建的對象的函數。例如，

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

好吧，我已經想通了解決方案。這是可能需要的人的工作代碼。

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') 
    } 
}