本文實例分析了JS獲取鼠標坐標位置的方法。分享給大家供大家參考，具體如下：
取鼠標坐標位置有這些：鼠標在視口的坐標位置(clientX,clientY),鼠標在頁面的坐標位置(pageX,pageY),鼠標在屏幕的坐標位置(screenX,screenY)，其中鼠標在視口的坐標位置(clientX,clientY),以及鼠標在屏幕的坐標位置(screenX,screenY)在所有的瀏覽器中都支持，但是鼠標在頁面的坐標位置(pageX,pageY)在IE8及更早版本不支持，但是沒有關系，可以通過scrollLeft 和 scrollTop可以計算出pageX,pageY的值。
首先是跨瀏覽器的事件對象
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.視口坐標位置
var div = document.getElementById("myDiv");EventUtil.addHandler(div,"click",function(event){ event = EventUtil.getEvent(event); alert("Client coordinages: "+event.clientX+","+event.clientY);});2.屏幕坐標位置
var div = document.getElementById("myDiv");EventUtil.addHandler(div,"click",function(event){ event = EventUtil.getEvent(event); alert("Screen coordinates: "+event.screenX+","+event.screenY);});3.頁面坐標位置
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);});更多關于JavaScript鼠標操作相關內容感興趣的讀者可查看本站專題：《JavaScript鼠標操作技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
