JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析
本文實(shí)例分析了JS獲取鼠標(biāo)坐標(biāo)位置的方法。分享給大家供大家參考,具體如下:
取鼠標(biāo)坐標(biāo)位置有這些:鼠標(biāo)在視口的坐標(biāo)位置(clientX,clientY),鼠標(biāo)在頁面的坐標(biāo)位置(pageX,pageY),鼠標(biāo)在屏幕的坐標(biāo)位置(screenX,screenY),其中鼠標(biāo)在視口的坐標(biāo)位置(clientX,clientY),以及鼠標(biāo)在屏幕的坐標(biāo)位置(screenX,screenY)在所有的瀏覽器中都支持,但是鼠標(biāo)在頁面的坐標(biāo)位置(pageX,pageY)在IE8及更早版本不支持,但是沒有關(guān)系,可以通過scrollLeft 和 scrollTop可以計(jì)算出pageX,pageY的值。
首先是跨瀏覽器的事件對(duì)象
var EventUtil = { addHandler:function(elem,type,handler){ if(elem.addEventListener) { elem.addEventListener(type,handler,false); }else if(elem.attachEvent) { elem.attachEvent("on"+type,handler); }else { elem["on"+type]=handler; } }, removeHandler:function(elem,type,handler){ if(elem.removeEventListener) { elem.removeEventListener(type,handler,false); }else if(elem.detachEvent) { elem.detachEvent("on"+type,handler); }else { elem["on"+type]=null; } }, getEvent:function(event){ return event?event:window.event; }, getTarget:function(event){ return event.target||event.srcElement; }, preventDefault:function(event){ if(event,preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } } };
1.視口坐標(biāo)位置
var div = document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event = EventUtil.getEvent(event); alert("Client coordinages: "+event.clientX+","+event.clientY); });
2.屏幕坐標(biāo)位置
var div = document.getElementById("myDiv"); EventUtil.addHandler(div,"click",function(event){ event = EventUtil.getEvent(event); alert("Screen coordinates: "+event.screenX+","+event.screenY); });
3.頁面坐標(biāo)位置
var div = document.getElementById("myDiv"); EventUtil(div,"click",function(event){ event = EventUtil.getEvent(event); var pageX = event.pageX; var pageY = event.pageY; if(pageX==undefined) { pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft; } if(pageY==undefined) { pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop; } alert("Page coordinates: "+pageX+","+pageY); });
更多關(guān)于JavaScript鼠標(biāo)操作相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript鼠標(biāo)操作技巧匯總》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)獲取div坐標(biāo)的方法
- javascript獲取文檔坐標(biāo)和視口坐標(biāo)
- javascript實(shí)時(shí)獲取鼠標(biāo)坐標(biāo)值并顯示的方法
- js使用onmousemove和onmouseout獲取鼠標(biāo)坐標(biāo)的方法
- JS網(wǎng)頁在線獲取鼠標(biāo)坐標(biāo)值的方法
- javascript獲取當(dāng)前鼠標(biāo)坐標(biāo)的方法
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例
- js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析
- JavaScript獲取對(duì)象在頁面中位置坐標(biāo)的方法
相關(guān)文章
利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關(guān)于利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過實(shí)例代碼代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03JScript內(nèi)置對(duì)象Array中元素的刪除方法
JScript內(nèi)置對(duì)象Array中元素的刪除方法...2007-03-03JavaScript與ActionScript3兩者的同性與差異性
接觸JavaScript和ActionScript3也有近5年的時(shí)間了,它們都是應(yīng)用比較廣泛的腳本語言.接下來通過本文給大家介紹JavaScript與ActionScript3兩者的同性與差異性,感興趣的朋友一起學(xué)習(xí)吧2016-09-09JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析
這篇文章主要介紹了JavaScript 使用 splice 方法刪除數(shù)組元素可能導(dǎo)致的問題分析,當(dāng)在 JavaScript 中從數(shù)組中刪除元素時(shí),使用 splice 方法時(shí)需要謹(jǐn)慎,本文給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04讓背景如此暗淡(一種彈出提示信息時(shí)頁面背景色調(diào)改變的方法)
讓背景如此暗淡(一種彈出提示信息時(shí)頁面背景色調(diào)改變的方法)...2006-10-10使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定
這篇文章主要介紹了使用Object.defineProperty實(shí)現(xiàn)簡(jiǎn)單的js雙向綁定的相關(guān)資料,需要的朋友可以參考下2016-04-04JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10