兼容性寫法獲取鼠標坐標

TIGERB 發(fā)布于2019-08-26 17:04 / 480人閱讀

摘要：事件發(fā)生時鼠標瀏覽器內(nèi)容區(qū)域的坐標鼠標在屏幕上的坐標只有支持，相當于下的所能得到下面這種算法想要忽略滾動因素，獲取相對于文檔的坐標時，下支持與屬性，這兩個屬性已經(jīng)把滾動計算在內(nèi)了。

首先：

先對比一下pagexX,clientX,screenX,offsetX幾個的區(qū)別

pageX/pageY:鼠標相對于整個頁面的X/Y坐標
整個頁面：整個網(wǎng)頁的全部，比如當網(wǎng)頁很寬很長，寬2000px，高3000px, pageX/pageY的最大值就是他們。
ClientX/clientY :事件發(fā)生時鼠標瀏覽器內(nèi)容區(qū)域的X/Y坐標
screenX/screenY:鼠標在屏幕上的坐標
offsetX/offsetY： 只有IE支持，相當于IE下的pageX,pageY

所能得到下面這種算法：
e.clientX+document.documentElement.scrollLeft- document.documentElement.clientLeft =e.pageX
e.clientY+document.documentElement.scrollTop-document.documentElement.clientTop = e.pageY

想要忽略滾動因素，獲取相對于文檔(body)的坐標時，
Firefox下支持pageX與pageY屬性，這兩個屬性已經(jīng)把滾動計算在內(nèi)了。
Chrome下可以通過document.body.scrollLeft,document.body.scrollTop計算出頁面滾動位移，
IE下通過document.documentElement.scrollLeft,document.documentElement.scrollTop
所以綜合Code如下：

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;
       return { "x":x,"y":y };
   }
   var mousePos = getMousePos(event);
   console.log(mousePos.x,mousePos.y);

GPU云服務(wù)器云服務(wù)器獲取鼠標坐標鼠標點擊坐標 js 求鼠標當前坐標獲取坐標

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110105.html

相關(guān)文章

JavaScript 事件簡介

摘要：事件流包括兩種模式冒泡和捕獲。和事件名，函數(shù)，此方法不支持僅僅支持兩個參數(shù)事件名稱事件回調(diào)。事件中沒有這個屬性。鼠標相對于事件源元素的左邊界上邊界坐標，只有事件有這個屬性，標準事件沒有對應(yīng)的屬性。事件事件的概念事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間【觸發(fā)與響應(yīng)】事件觸發(fā)：用戶在頁面上操作(如點擊按鈕, 鼠標滑過, 鼠標點擊, 鼠標松開, 文本框獲得焦點, 失去焦點等)...

makeFoxPlay 2019-08-02 14:04 評論0 收藏0
JavaScript 事件簡介

摘要：事件流包括兩種模式冒泡和捕獲。和事件名，函數(shù)，此方法不支持僅僅支持兩個參數(shù)事件名稱事件回調(diào)。事件中沒有這個屬性。鼠標相對于事件源元素的左邊界上邊界坐標，只有事件有這個屬性，標準事件沒有對應(yīng)的屬性。事件事件的概念事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間【觸發(fā)與響應(yīng)】事件觸發(fā)：用戶在頁面上操作(如點擊按鈕, 鼠標滑過, 鼠標點擊, 鼠標松開, 文本框獲得焦點, 失去焦點等)...

Faremax 2019-08-23 14:35 評論0 收藏0
前端基礎(chǔ)進階（十）：面向?qū)ο髮崙?zhàn)之封裝拖拽對象

摘要：前面幾篇文章，我跟大家分享了的一些基礎(chǔ)知識，這篇文章，將會進入第一個實戰(zhàn)環(huán)節(jié)利用前面幾章的所涉及到的知識，封裝一個拖拽對象。不封裝對象直接實現(xiàn)利用原生封裝拖拽對象通過擴展來實現(xiàn)拖拽對象。 showImg(https://segmentfault.com/img/remote/1460000008699587); 前面幾篇文章，我跟大家分享了JavaScript的一些基礎(chǔ)知識，這篇文章，...

Eidesen 2019-08-21 18:31 評論0 收藏0
JavaScript中的各種寬高以及位置總結(jié)

摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導(dǎo)致這些屬性間相互混淆，這里一一講解。文章轉(zhuǎn)自中的各種寬高以及位置總結(jié) 在javascript中操作dom節(jié)點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時...

microelec 2019-08-21 10:26 評論0 收藏0
瀏覽器兼容問題

摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。一、什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...

wenshi11019 2019-08-26 13:57 評論0 收藏0