鼠标位置精确定位总结
鼠標(biāo)位置
| 1 | event.x | 以瀏覽器窗口可見(jiàn)部分的左上角為坐標(biāo)原點(diǎn)（不含滾動(dòng)條） | √ | √ | √? | X | √ | ? |
| 2 | event.y | 以瀏覽器窗口可見(jiàn)部分的左上角為坐標(biāo)原點(diǎn)（不含滾動(dòng)條） | √ | √ | √? | X | √ | ? |
| 3 | event.clientX | 以瀏覽器窗口可見(jiàn)部分的左上角為坐標(biāo)原點(diǎn)（不含滾動(dòng)條） | √ | √ | √? | √ | √ | ? |
| 4 | event.clientY | 以瀏覽器窗口可見(jiàn)部分的左上角為坐標(biāo)原點(diǎn)（不含滾動(dòng)條） | √ | √ | √? | √ | √ | ? |
| 5 | offsetX | 以當(dāng)前元素的左上角為坐標(biāo)原點(diǎn) | √ | √ | √ | X | √ | IE和Opera中不含邊框，Netscape中含邊框 |
| 6 | offsetY | 以當(dāng)前元素的左上角為坐標(biāo)原點(diǎn) | √ | √ | √ | X | √ | IE和Opera中不含邊框，Netscape中含邊框 |
| 7 | screenX | 以屏幕的左上角為坐標(biāo)原點(diǎn) | √ | √ | √? | √ | √ | ? |
| 8 | screenY | 以屏幕的左上角為坐標(biāo)原點(diǎn) | √ | √ | √? | √ | √ | ? |
| 9 | pageX | 以瀏覽器窗口的左上角為坐標(biāo)原點(diǎn)（固有左上角含滾動(dòng)條） | X | √ | √? | √ | √ | ? |
| 10 | pageY | 以瀏覽器窗口的左上角為坐標(biāo)原點(diǎn)（固有左上角含滾動(dòng)條） | X | √ | √? | √ | √ | ? |
| 11 | layerX | 以當(dāng)前元素的左上角為坐標(biāo)原點(diǎn)（含邊框） | X | √ | √? | √ | X | 建議放棄此屬性，Netscape支持混亂 |
| 12 | layerY | 以當(dāng)前元素的左上角為坐標(biāo)原點(diǎn)（含邊框） | X | √ | √? | √ | X | 建議放棄此屬性，Netscape支持混亂 |
?
需要說(shuō)明的是，現(xiàn)在除了Firefox外各大瀏覽器已經(jīng)全都支持offsetX和offsetY屬性，只是不同到瀏覽器之間存在細(xì)微的差別，如IE和Opera瀏覽器中，此屬性不包含邊框（即以當(dāng)前元素內(nèi)部的左上角為坐標(biāo)原點(diǎn)）。而Netscape瀏覽器中，此屬性卻包含邊框（即以當(dāng)前元素外部的左上角為坐標(biāo)原點(diǎn)）。
Chrome和Safari瀏覽器對(duì)layerX和layerY屬性的支持相當(dāng)?shù)幕靵y（例如：如果當(dāng)前元素中還存在子元素，那么鼠標(biāo)移動(dòng)到子元素上，layerX顯示的是子元素的X坐標(biāo)，而layerY顯示到卻是父元素的Y坐標(biāo)），所以建議放棄此屬性。在Firefox中，此屬性不支持嵌套（即<div><span></span></div>當(dāng)鼠標(biāo)移到<span>標(biāo)簽上時(shí)，此屬性只顯示鼠標(biāo)在外層標(biāo)簽<div>中的坐標(biāo)，而不是在<span>中的坐標(biāo)。
對(duì)于pageX和pageY由于IE不支持此屬性，那么可由如下方法實(shí)現(xiàn)跨瀏覽器實(shí)現(xiàn)pageX和pageY：
1 function pointerX() { 2 return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); 3 } 4 5 function pointerY() { 6 return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 7 }口說(shuō)無(wú)憑，自己動(dòng)手，豐衣足食，以下代碼自己到各大瀏覽器中運(yùn)行下就知曉差別
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>顯示鼠標(biāo)坐標(biāo)</title> 6 <style> 7 * { 8 margin: 0 9 } 10 11 #d1 { 12 position: absolute; 13 left: 50px; 14 top: 50px; 15 border: 1px blue solid; 16 } 17 </style> 18 <SCRIPT> 19 function dullwolf(event) { 20 21 if(navigator.appName=="Microsoft Internet Explorer"){ 22 var evt = window.event; 23 document.getElementById("p1").innerText = evt.x; 24 document.getElementById("p2").innerText = evt.y; 25 document.getElementById("p3").innerText = evt.clientX; 26 document.getElementById("p4").innerText = evt.clientY; 27 document.getElementById("p5").innerText = evt.offsetX; 28 document.getElementById("p6").innerText = evt.offsetY; 29 document.getElementById("p7").innerText = evt.screenX; 30 document.getElementById("p8").innerText = evt.screenY; 31 document.getElementById("p9").innerText = evt.layerX; 32 document.getElementById("p10").innerText = evt.layerY; 33 document.getElementById("p11").innerText = evt.pageX; 34 document.getElementById("p12").innerText = evt.pageY; 35 } 36 else{ 37 var evt = event; 38 document.getElementById("p1").textContent = evt.x; 39 document.getElementById("p2").textContent = evt.y; 40 document.getElementById("p3").textContent = evt.clientX; 41 document.getElementById("p4").textContent = evt.clientY; 42 document.getElementById("p5").textContent = evt.offsetX; 43 document.getElementById("p6").textContent = evt.offsetY; 44 document.getElementById("p7").textContent = evt.screenX; 45 document.getElementById("p8").textContent = evt.screenY; 46 document.getElementById("p9").textContent = evt.pageX; 47 document.getElementById("p10").textContent = evt.pageY; 48 document.getElementById("p11").textContent = evt.layerX; 49 document.getElementById("p12").textContent = evt.layerY; 50 } 51 } 52 document.onmousemove=dullwolf; 53 </SCRIPT> 54 </head> 55 <body> 56 <body> 57 <div id="d1">event.x=<span id="p1"> </span>; event.y=<span id="p2"></span>;<br /> 58 <br /> 59 clientX=<span id="p3"> </span> ; clientY=<span id="p4"> </span> ; <br /> 60 <br /> 61 offsetX=<span id="p5"> </span> ; offsetY=<span id="p6"> </span> ;<br /> 62 <br /> 63 screenX=<span id="p7"> </span> ; screenY=<span id="p8"> </span>;<br /> 64 <br /> 65 pageX=<span id="p9"> </span> ; pageY=<span id="p10"> </span>;<br /> 66 <br /> 67 layerX=<span id="p11"> </span> ; layerY=<span id="p12"> </span>;<br /> 68 <br /> 69 <p style="border:1px green solid;">子元素</p> 70 <p style="border:1px green solid;">子元素</p> 71 </div> 72 </body> 73 </html>以下是運(yùn)行結(jié)果，截圖時(shí)鼠標(biāo)位于"子元素"區(qū)域
IE運(yùn)行結(jié)果：
Chrome運(yùn)行結(jié)果：
Firefox運(yùn)行結(jié)果：
Opera運(yùn)行結(jié)果：
Safari運(yùn)行結(jié)果
轉(zhuǎn)載于:https://www.cnblogs.com/pinsige/p/3942182.html
總結(jié)
以上是生活随笔為你收集整理的鼠标位置精确定位总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Bitmap类getPixels()方法
- 下一篇： sqlserver中将行数据转为Xml文