生活随笔
收集整理的這篇文章主要介紹了
event对应的各种坐标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
IE8不支持的PageXY ? 相對于整個頁面鼠標的位置 包括溢出的部分
event.pageX;
event.pageY;
?
?
所有瀏覽器支持的： 相對于當前瀏覽器窗口可視區域的坐標
event.clientX;
event.clientY;
?
相對于當前屏幕（和瀏覽器窗口大小無關）的坐標
event.screenX;
event.screenY;
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>
window.onload =
function(){document.onmousemove =
function(event){var event = event||
window.event;var oDiv = document.getElementById("div1"
);function byName(name){return document.getElementsByName(name)[0
]}byName("pageX").value =
event.pageX;byName("pageY").value =
event.pageY;byName("clientX").value =
event.clientX;byName("clientY").value =
event.clientY;byName("screenX").value =
event.screenX;byName("screenY").value =
event.screenY;byName("scrollLeft").value = document.body.scrollLeft||
document.documentElement.scrollLeft;byName("scrollTop").value = document.body.scrollTop||
document.documentElement.scrollTop;//為了兼容IE8 所以才用下面的方法oDiv.style.top =event.clientY+(document.body.scrollTop||document.documentElement.scrollTop)+"px"
;oDiv.style.left =event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft)+"px"
;//oDiv.style.top =event.pageY+"px";//oDiv.style.left = event.pageX+"px";
}}</script></head>
<body style=" height: 2000px;"><div style="position:fixed;top:0;left:0;">pageX:<input type="text" name="pageX" />相對頁面IE8以及更早版本不支持<br>
pageY:<input type="text" name="pageY" /><br>
clientX:<input type="text" name="clientX" />相對于網頁的可視區域<br>
clientY:<input type="text" name="clientY" /><br>
screenX:<input type="text" name="screenX" />相對于屏幕，和瀏覽器窗口大小無關！<br>
screenY:<input type="text" name="screenY" /><br>
scrollTop:<input type="text" name="scrollTop" /><br>
scrollLef:<input type="text" name="scrollLeft" /><br>
</div><div id="div1" style="position:absolute; left:0;top:0; width:100px; height:100px; background:red;">1</div>
</body>
</html>
?
轉載于:https://www.cnblogs.com/websir/p/4396166.html
總結
以上是生活随笔為你收集整理的event对应的各种坐标的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
