兼容性寫(xiě)法獲取鼠標(biāo)坐標(biāo)

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

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

首先：

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

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

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

想要忽略滾動(dòng)因素，獲取相對(duì)于文檔(body)的坐標(biāo)時(shí)，
Firefox下支持pageX與pageY屬性，這兩個(gè)屬性已經(jīng)把滾動(dòng)計(jì)算在內(nèi)了。
Chrome下可以通過(guò)document.body.scrollLeft,document.body.scrollTop計(jì)算出頁(yè)面滾動(dòng)位移，
IE下通過(guò)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ù)器獲取鼠標(biāo)坐標(biāo) 鼠標(biāo)點(diǎn)擊坐標(biāo) js 求鼠標(biāo)當(dāng)前坐標(biāo) 獲取坐標(biāo)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110105.html

相關(guān)文章

JavaScript 事件簡(jiǎn)介

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

makeFoxPlay 2019-08-02 14:04 評(píng)論0 收藏0
JavaScript 事件簡(jiǎn)介

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

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

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

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

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

microelec 2019-08-21 10:26 評(píng)論0 收藏0
瀏覽器兼容問(wèn)題

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

wenshi11019 2019-08-26 13:57 評(píng)論0 收藏0