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

  • 问题

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

    2012年5月29日 7:00

全部回复