通过 JavaScript 获取页面上的鼠标位置
May 12th, 2010
Add Comment
用 JS 计算鼠标在页面上的位置并非难事, 只要把握好各浏览器的区别就可以轻易算出鼠标位置. (这是 DEMO)
视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以通过视窗看到页面的各个位置.
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置
右图中的 cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)
IE 以外的浏览器 (本人测试过 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离. 但 IE (本人测试过 IE6, IE7, IE8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.
以下是获取鼠标在页面上位置的代码实现. (这是 DEMO)
/** * 获取鼠标在页面上的位置 * @param ev 触发的事件 * @return x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置 */ function getMousePoint(ev) { // 定义鼠标在视窗中的位置 var point = { x:0, y:0 }; // 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离 if(typeof window.pageYOffset != 'undefined') { point.x = window.pageXOffset; point.y = window.pageYOffset; } // 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离 // IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { point.x = document.documentElement.scrollLeft; point.y = document.documentElement.scrollTop; } // 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度 else if(typeof document.body != 'undefined') { point.x = document.body.scrollLeft; point.y = document.body.scrollTop; } // 加上鼠标在视窗中的位置 point.x += ev.clientX; point.y += ev.clientY; // 返回鼠标在视窗中的位置 return point; }
记得以前我写过一个减速滚动置顶的 JavaScript 方法, 也是通过计算视窗和页面高度来实现的, 其计算方法与本文的方法不同小异, 也可以搬过来用.
这几个月来, 专注前端项目的开发, 也算小有收获, 最近我会将一些积累作成文章分享于众. 以此作为铺垫, 由浅入深, 希望可以带出一些有用的内容.
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 通过 JavaScript 获取页面上的鼠标位置
pageXOffset是早期Netscape浏览器才有的，现在浏览器都不支持的
u.u no se japones o coreano pero kiero descargar minimal y tengo mucho lsd y ganjah desde colombia u.u
ie6不好用，横纵坐标多2像素
呵呵，真好，我写的鼠标动半天数字才变一点点~
@mg12
是的，就是它
哪个群? 我群太多, 谈技术的我一般都发言 (我上 Q 都不谈技术).
@Jutoy
高个毛, 记录一下, 以后自己好找.
@Platero
那已经是 4, 5 年前的事了. 感叹道: 年轻真好.
@ZhouQi
难道是那本很厚的犀牛封面的绿色的 JavaScript 书籍?
好的！最近也在自己动手搞代码
不懂技术。只能路过。。
查了下犀牛，document.documentElement就是对应html元素～
我试了下：
function getMouseXY(ev) {
var point = {
x:0,
y:0
};
point.x = Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) + ev.clientX;
point.y = Math.max(document.documentElement.scrollTop,document.body.scrollTop) + ev.clientY;
return point;
}
各个浏览器都行，很奇怪chrome为什么一body元素来算，我之前这么写：
point.y = document.getElementsByTagName("html")[0].scrollTop + ev.clientY;
其它浏览器都行，但是chrome必须：
point.y = document.getElementsByTagName("body")[0].scrollTop + ev.clientY;
在css中chrome的顶级元素也是html，为啥在js里要用body？博主知道吗？
Delicious food!
哈哈，期待更多文章~
图片的放大显示效果很爽~
"不同小异"哦~
学习了。每次来都有收获。
大神~
啊!
突然发现my opera上的mg12就是你呀!!!
果真大名鼎鼎!
高端应用，拜读
难得这么靠前的位置 拜读了
确实是,群里也N久不说话啦
JS小菜路过。。。学习。。。
来学习JS～吼一声
不错，期待更多JavaScript的内容，跟你学习了
@underone
我这栏文笔, 能出书吗?
@xiao3
是的, 恭喜.
@行骏
我想由浅入深. 嗯...
@Leeiio
项目不忙的时候我还是会坚持更新的. 可预见的未来一段时间我会写几个关于 JS 的文章.
去了阿里的一般博客都会鲜有更新了。。
由浅入深... ...
你想干嘛？
板凳么？
等待一个系列
再出本书为自己纪念一下:)