鼠標緩慢移出窗口時無法正常工作 - 解決方法？

我使用下面的函數（在this really helpful post找到）來檢測鼠標是否離開了窗口：鼠標緩慢移出窗口時無法正常工作 - 解決方法？

var addEvent = function (obj, evt, fn) 
{ 
    if (obj.addEventListener) 
    { 
    obj.addEventListener(evt, fn, false); 
    } 
    else if (obj.attachEvent) 
    { 
    obj.attachEvent("on" + evt, fn); 
    } 
}; 

addEvent(document, "mouseout", function (e) 
{ 
    e = e ? e : window.event; 
    var from = e.relatedTarget || e.toElement; 
    if (!from || from.nodeName == "HTML") 
    { 
    console.log("left the window"); 
    } 
});

然而，當鼠標離開該窗口確實緩慢，或當鼠標實在是這是不工作在窗戶離開窗戶之前靠近窗戶的邊界。

是否有解決方法，使用jQuery或純Javascript？

來源

2014-01-17 The Random Guy

如果你使用jQuery，你可以綁定mouseout事件：

$(document).on('mouseout', function() { console.log("left the window") });

你並不需要計算到鼠標的任何引用。由於事件直接綁定到文檔，因此將其有效地綁定到頁面的邊界。主內容窗格外的任何位置（例如標籤欄，網址欄，窗口邊框等）均位於文檔之外，並會觸發鼠標移出。它不會在任何其他用戶環境下觸發。

這裏是一個工作Fiddle Demo

來源

2014-01-17 21:39:18 Bic

不，這是行不通的。由於事件傳播，我相信，它將鼠標懸停在文檔上時將所有內容都檢測爲鼠標移動。不幸的是，jQuery的用戶並沒有這樣做。 –

我添加了一個小提琴演示，顯示這個工程。 – Bic

在真實條件下嘗試。在我們現在的頁面上（它有jQuery）。它不工作。 –

我已經做了這個解決辦法，當他們接近頁面的邊緣（15個像素保證金效果很好）檢測。我將此與mouseout事件結合使用）

var mouseNearWindowEdge = function(e) { 
     var gap = 15;  
     var mp = { x: e.pageX-window.pageXOffset, y: e.pageY-window.pageYOffset }; 
     if (mp.x<gap || mp.y<gap || mp.x>window.innerWidth-gap || mp.y>window.innerHeight-gap) return true; 
     return false; 
    };

在mousemove上添加事件偵聽器並調用該函數。

來源

2015-03-13 10:10:38 kernowcode

鼠標緩慢移出窗口時無法正常工作 - 解決方法？

回答

相關問題