在body的onclick事件中运行如下代码:
function test()
{
// alert(arguments.length);
var evt = arguments.length>1?arguments[0]:event;
var s="";
s="<table border=1 cellpadding=4px>";
s+="<tr><td style='background-color:#F1F1F1;width:80px;'>X</td><td>"+evt.x+"</td></tr>";
s+="<tr><td>Y</td><td>"+evt.y+"</td></tr>";
s+="<tr><td>clientX</td><td>"+evt.clientX+"</td></tr>";
s+="<tr><td>clientY</td><td>"+evt.clientY+"</td></tr>";
s+="<tr><td>offsetX</td><td>"+evt.offsetX+"</td></tr>";
s+="<tr><td>offsetY</td><td>"+evt.offsetY+"</td></tr>";
s+="<tr><td>screenX</td><td>"+evt.screenX+"</td></tr>";
s+="<tr><td>screenY</td><td>"+evt.screenY+"</td></tr>";
s+="<tr><td>pageX</td><td>"+evt.pageX+"</td></tr>";
s+="<tr><td>pageY</td><td>"+evt.pageY+"</td></tr>";
s+="</table>";
var div = document.getElementById("debug");
if(!div)
{
div = document.createElement("DIV");
div.id="debug";
div.style.position="absolute";
div.style.backgroundColor="white";
div.style.padding="4px";
div.style.border="1px solid red";
document.body.appendChild(div);
}
div.innerHTML = s;
var x=evt.pageX?evt.pageX:evt.clientX;
var y=evt.pageY?evt.pageY:evt.clientY;
div.style.left=x+"px";
div.style.top=y+"px";
}
在safari、chrome中均完美无瑕,无论页面是否发生了滚动,“pageX、pageY”属性都能够准确定位到鼠标点击的坐标点。
但是到了IE就可麻烦了,首先,如果没有<!doctype>的声明,是正常的。此时使用“clientX、clientY”也能够准确定位;
但是如果加上了<!doctype>的声明,就完全乱套了!无论是X、clientX获取的都是鼠标点距离窗口边缘的距离,而没有计算上页面的滚动距离。
难道还要将scrollTop计算出来再加上去吗?可我又怎么判断页面是否声明了<!doctype>呢?!
da jia hao!