var getCursorPositionOfPage = function(e){
var x, y;
e = e || window.event;
x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return {
'x':x,
'y':y
};
};
使用方式:
document.querySelector("body").addEventListener("click",getCursorPositionOfPage ,false);
或
document.getElementsByTagName("body")[0].onmousemove = getCursorPositionOfPage ;
经过简单的测试,各个浏览器的差异如下:
pageY chrome/IE10/IE9/firefox29 随滚动条滚动而变化 页面高度 X 同理 IE8/IE7 未定义
clientY chrome/IE10/IE9/IE8/IE7/firefox29 不随滚动条滚动而产生变化 窗口高度 X 同理
document.documentElement chrome/IE10/IE9/IE8/IE7/firefox29 html
document.body chrome/IE10/IE9/IE8/IE7/firefox29 body
// 滚动条未滚动
document.documentElement.scrollTop chrome 0
document.body.scrollTop chrome 0
// 滚动条滚动
document.documentElement.scrollTop chrome 0
document.body.scrollTop chrome 100
// 滚动条未滚动
document.documentElement.scrollTop IE10/IE9/IE8/IE7/firefox29 0
document.body.scrollTop IE10/IE9/IE8/IE7/firefox29 0
// 滚动条滚动
document.documentElement.scrollTop IE10/IE9/IE8/IE7/firefox29 100
document.body.scrollTop IE10/IE9/IE8/IE7/firefox29 0
上面的 0 表示就是 0 ,100 表示有值。
在印象中这中JS貌似都是做一些鼠标追踪的小图片之类的。
除了这个,其实还有很多其他的用处的,最直接的就是拖拽。