鼠标的页面坐标=鼠标的客户区坐标+页面的滚动距离
即:
event.pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
event.pageY = event.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
在页面没有滚动的情况下,pageX和pageY的值和clientX和clientY的值相等。
IE8以及更早版本不支持事件对象上的页面坐标,所以可以使用客户区坐标和滚动信息计算出来。
这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中 的scrollLeft和scrollTop属性。
var div = document.getElementById("myDiv");
div.onmouseover = function(event){
var pageX = event.pageX;
var pageY = event.pageY;
if(pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined){
pageY = event.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
}
alert("page coordinates: "+pageX + " , "+pageY);
}