當指針距瀏覽器窗口底部X個單位時觸發鼠標事件

好的，我的問題很簡單，但我不確定答案是否會。我有一個固定在瀏覽器窗口底部的元素。當它不需要時，我想隱藏它（設置高度爲0px）。當用戶的鼠標遠離WINDOW底部（不是文檔）X單位時，我想再次顯示div。我搜索了一下，我能找到的所有信息都是關於當頁面從底部滾動到X單位時觸發事件/執行預定操作的信息。如果我可以指出正確的方向，我不需要如何做到這一點的確切代碼。當指針距瀏覽器窗口底部X個單位時觸發鼠標事件

問題（對於那些沒有看到它的）：
如何在鼠標指針位於瀏覽器窗口底部的X個單位（不是文檔）內時觸發事件/執行函數？

一些注意事項：
這是爲一個greasemonkey/userscript，所以答案不需要適用於IE瀏覽器。
請不要建議使用圖書館。對於像這樣的小事，要求整個圖書館不是我願意接受的答案。

答：大廈關閉下面基爾lvlev的回答（記得給他的答覆的給予好評）：

// Standards compliant browsers 
// if you have an IE solution, post it in the comments and I will add it. 
window.addEventListener("mousemove",function(e) { 
    // 20 is the number of pixels from the bottom inwhich the action should be preformed 
    if ((this.innerHeight - 20) <= e.clientY) { 
     //do stuff 
    } 
});

來源

2012-11-04 SReject

你可以嘗試放置一個空的div（設置寬度/高度）並添加懸停監聽器。這樣，當用戶滾動屏幕的那一部分時，它會啓動你的javascript功能 – RyanS

這個問題是div消耗鼠標事件，比如div覆蓋的項目的點擊。 – SReject

使用鼠標移動事件處理

$(window).mousemove(function(e) 
{ 
     //mouse coordinates: e.pageX e.pageY 
     //window height $(window).height() 
});

非jQuery的：

window.onmousemove = function(e) { 
    //e.clientX e.clientY 
    //window.innerHeight 
}

來源

2012-11-04 01:37:00

我希望我不會訴諸這個，哈哈。 – SReject

我重寫了我的答案。這是好得多 –

這也是jQuery。我問了非庫依賴的答案。此外，這是文件。不是瀏覽器窗口 – SReject

看看這個jsfiddle我爲你製作：j sfiddle.net/Cnhvm/

在那裏展示了一般想法。你顯然想要重新定位div，改變其大小，並刪除背景顏色。還要確保它已經將它放在頁面中任何其他內容的頂部。

這是標準的JavaScript：onmouseover="hoverOver();"

如果你想保留你的鏈接，你可以把他們在一些小塊在分度，更多的工作。

來源

2012-11-04 01:56:55 RyanS

這裏的問題是首先，這是一個用戶腳本，這意味着我無法控制HTML。第二個問題是頁面比窗口長。這意味着每次頁面滾動時，我都必須從div中添加/刪除項目，並將它們放回到DOM中的特定位置，然後將我的元素位於頂部的新項目添加到ele。 – SReject

聽起來像一個挑戰，你可以使元素滾動，你只需要確保它們在div上。 – RyanS

並非如此！我只是在窗口觀看鼠標移動事件。看到Kir的回答 – SReject

當指針距瀏覽器窗口底部X個單位時觸發鼠標事件

回答

相關問題