兼容性寫法獲取鼠標坐標

TIGERB 發布于2019-08-26 17:04 / 469人閱讀

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

首先：

先對比一下pagexX,clientX,screenX,offsetX幾個的區別

pageX/pageY:鼠標相對于整個頁面的X/Y坐標
整個頁面：整個網頁的全部，比如當網頁很寬很長，寬2000px，高3000px, pageX/pageY的最大值就是他們。
ClientX/clientY :事件發生時鼠標瀏覽器內容區域的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屬性，這兩個屬性已經把滾動計算在內了。
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云服務器云服務器獲取鼠標坐標鼠標點擊坐標 js 求鼠標當前坐標獲取坐標

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110105.html

JavaScript 事件簡介

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

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

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

Faremax 2019-08-23 14:35 評論0 收藏0
前端基礎進階（十）：面向對象實戰之封裝拖拽對象

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

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

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

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

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

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