当前位置 > 首页 > IE9\IE8

有关在IE9中获取鼠标点击时的坐标点的困惑!

2012-5-29 14:45:00来源:IE9\IE8

在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!