基于JavaScript獲取鼠標位置的各種方法
在一些DOM操作中我們經(jīng)常會跟元素的位置打交道，鼠標交互式一個經(jīng)常用到的方面，令人失望的是不同的瀏覽器下會有不同的結(jié)果甚至是有的瀏覽器下沒結(jié)果，這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結(jié)，沒特殊聲明代碼在IE8，F(xiàn)ireFox，Chrome下進行測試兼容
鼠標點擊位置坐標
相對于屏幕
如果是涉及到鼠標點擊確定位置相對比較簡單，獲取到鼠標點擊事件后，事件screenX，screenY獲取的是點擊位置相對于屏幕的左邊距與上邊距，不考慮iframe因素，不同瀏覽器下表現(xiàn)的還算一致。
function getMousePos(event) {
var e = event || window.event;
return {'x':e.screenX,'y':screenY}
}
相對瀏覽器窗口
簡單代碼即可實現(xiàn)，然而這是還不夠，因為絕大多數(shù)情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，event的clientX，clientY屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。于是類似的我們寫出了這樣的代碼
function getMousePos(event) {
var e = event || window.event;
return {'x':e.clientX,'y':clientY}
}
相對文檔
簡單測試也沒什么問題，但是clientX與clientY獲取的是相對于當前屏幕的坐標，忽略頁面滾動因素，這在很多條件下很有用，但當我們需要考慮頁面滾動，也就是相對于文檔（body元素）的坐標時怎么辦呢？加上滾動的位移就可以了，下邊我們試試怎么計算頁面滾動的位移。
其實在Firefox下問題會簡單很多，因為Firefox支持屬性pageX,與pageY屬性，這兩個屬性已經(jīng)把頁面滾動計算在內(nèi)了。
在Chrome可以通過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下可以通過document.documentElement.scrollLeft ，document.documentElement.scrollTop
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
//alert('x: ' + x + '\ny: ' + y);
return { 'x': x, 'y': y };
}
以上內(nèi)容是小編給大家介紹的基于JavaScript獲取鼠標位置的各種方法，希望大家喜歡。
相關(guān)文章
今天小編就為大家分享一篇解決JavaScript layui 下拉框不顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)貪吃蛇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
label+input實現(xiàn)按鈕開關(guān)切換效果的實例
下面小編就為大家?guī)硪黄猯abel+input實現(xiàn)按鈕開關(guān)切換效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了JS實現(xiàn)的顏色實時漸變效果,結(jié)合實例形式分析了JavaScript結(jié)合時間函數(shù)定時觸發(fā)動態(tài)改變頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JavaScript檢測原始值、引用值、屬性的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
本文給大家總結(jié)了有關(guān)js代碼性能優(yōu)化的相關(guān)知識，非常不錯，感興趣的朋友一起學習吧2016-05-05
javascript實現(xiàn)點擊提交按鈕后顯示loading的方法
這篇文章主要介紹了javascript實現(xiàn)點擊提交按鈕后顯示loading的方法,涉及javascript動態(tài)設(shè)置頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-07-07
JavaScript利用fetch實現(xiàn)異步請求的方法實例
傳遞信息到服務(wù)器，從服務(wù)器獲取信息，是前端發(fā)展的重中之重，尤其是現(xiàn)在前后端分離的大前提下，前后端的數(shù)據(jù)交互是前端的必修科目了，下面這篇文章主要給大家介紹了關(guān)于JavaScript利用fetch實現(xiàn)異步請求的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
前端JavaScript實現(xiàn)文件壓縮的全面優(yōu)化指南
JavaScript文件大小直接影響網(wǎng)頁加載速度和用戶體驗,本文將詳細介紹從基礎(chǔ)到高級的各種JavaScript壓縮優(yōu)化技術(shù),小伙伴可以根據(jù)需求進行選擇2025-04-04