e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置

最新推荐文章于 2023-09-26 16:31:10 发布

jizhonghua

最新推荐文章于 2023-09-26 16:31:10 发布

阅读量377

点赞数

分类专栏： JS 文章标签：浏览器 JavaScript html ViewUI

本文链接：https://blog.csdn.net/jizhonghua/article/details/84495674

版权

JS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function mousePosition(ev){//返回一个类
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
}
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);//mousePos现在为一个类
document.getElementById('txt').value=mousePos.x+":"+mousePos.y
}
document.onmousemove = mouseMove
</script>
</head>
<body>
<div>
<input id="txt"/>
</div>
</body>
</html>
注：因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500，那么 pageY 将变成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去