html获取鼠标的当前位置
1.相对于屏幕
如果是涉及到鼠标点击确定位置相对比较简单&＃xff0c;获取到鼠标点击事件后&＃xff0c;事件screenX&＃xff0c;screenY获取的是点击位置相对于屏幕的左边距与上边距&＃xff0c;不考虑iframe因素&＃xff0c;不同游览器下表现的还算一致。
function getMousePos(event) {var e &＃61; event || window.event;return {&＃39;x&＃39;:e.screenX,&＃39;y&＃39;:screenY}
}
2.相对于游览器窗口
简单代码即可实现&＃xff0c;然而这时还不够&＃xff0c;因为绝大多数情况下我们希望获取鼠标点击位置相对于游览器窗口的坐标&＃xff0c;event的clientX&＃xff0c;clientY属性分别表示鼠标点击位置相对于文档的左边距&＃xff0c;上边距。
function getMousePos(event) {var e &＃61; event || window.event;return {&＃39;x&＃39;:e.clientX,&＃39;y&＃39;:clientY}
}
3.页面滚动
clientX与clientY是获取相对于当前屏幕的坐标&＃xff0c;忽略了页面滚动因素&＃xff0c;这在很多环境下很有用&＃xff0c;但当我们需要考虑页面滚动&＃xff0c;也就是相对于文档&＃xff08;body元素&＃xff09;的坐标时怎么办呢&＃xff1f;只要加上滚动的位移就可以了。
在chrome可以通过document.body.scrollLeft&＃xff0c;document.body.scrollTop计算出页面滚动位移&＃xff0c;而在IE下可以通过document.documentElement.scrollLeft&＃xff0c;document.documentElement.scrollTop
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle><style type&＃61;"text/css">.centerClass{position: absolute;top: 50%;left: 50%;}style>
head>
<body><div class&＃61;"centerClass">鼠标x位置:<input type&＃61;"text" id&＃61;"x">input><br>鼠标y位置:<input type&＃61;"text" id&＃61;"y">input>div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111div><script>document.onmousemove &＃61; mouseMove;function mouseMove(event){var e &＃61; event || window.event;var scrollx &＃61; document.documentElement.scrollLeft || document.body.scrollTop;var scrolly&＃61; document.documentElement.scrollTop || document.body.scrollTop;var x &＃61; e.pageX || e.clientX &＃43; scrollx;var y &＃61; e.pageY || e.clientY &＃43; scrolly;document.getElementById("x").value &＃61; x;document.getElementById("y").value &＃61; y;console.log(x);console.log(y);}script>
body>
html>
展示效果&＃xff1a;
京公网安备 11010802041100号