事件发生时的坐标取值问题

clientX, clientY 是相对于浏览器的窗口的文档区域(包括滚动条)
screenX, screenX 是相对于屏幕
offsetX, offsetY 是相对于触发这个事件的对象的x y 坐标
x, y 相对于文档,我把它看成document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>坐标示例</title>
    <style type="text/css">
        body
        {
            font-size:12px;
            border:0;
        }
        #info
        {
            width:300px;
            height:100px;
            background-color:Green;
        }
        #info p
        {
            margin:5px;
        }
        #info ul
        {
         margin:5px;
         list-style:none;
        }
    </style>
    <script type="text/javascript">
        //IE
        window.onload = function() {
            var ex = $('ex');            var dx = $('bx');
            var dy = $('by');            var cx = $('cx');
            var cy = $('cy');
            var sx = $('sx');
            var sy = $('sy');
            var ox = $('ox');
            var oy = $('oy');
            var x = $('x');
            var y = $('y');            document.body.onmousemove = mouseinfo;            function mouseinfo() {
                bx.innerHTML = document.body.offsetWidth;
                by.innerHTML = document.body.offsetHeight;
            
                //                if (x.firstChild)
                //                    x.firstChild.nodeValue = event.clientX;
                //                else
                //                    x.appendChild(document.createTextNode(event.clientX));
                //W3C规范写法
                cx.firstChild.nodeValue = event.clientX;             //IE clinetX, clinetY 是相对浏览器的窗口的文档区域(包括滚动条)
                cy.firstChild.nodeValue = event.clientY;                sx.firstChild.nodeValue = event.screenX;            //IE screenX , screenY 是相对于屏幕的x y;
                sy.firstChild.nodeValue = event.screenY;                ox.firstChild.nodeValue = event.offsetX;
                oy.firstChild.nodeValue = event.offsetY;                x.firstChild.nodeValue = event.x;
                y.firstChild.nodeValue = event.y;
            }            function $(id) {
                return document.getElementById(id);
            }
        }
    </script>
</head>
<body>
    <div id="info">
        <p>浏览器:<p id="ex"></p></p>
        <p>document坐标</p>
        <ul>
            <li>x:<p id="bx">0</p></li>
            <li>y:<p id="by">0</p></li>
        </ul>
        <p>鼠标坐标</p>
        <ul>
            <li>clientX:<p id="cx">0</p></li>
            <li>clientY:<p id="cy">0</p></li>
            <li>----------------------------------</li>
            <li>screenX:<p id="sx">0</p></li>
            <li>screenY:<p id="sy">0</p></li>
            <li>----------------------------------</li>
            <li>offsetX:<p id="ox">0</p></li>
            <li>offsetY:<p id="oy">0</p></li>
            <li>----------------------------------</li>
            <li>X:<p id="x">0</p></li>
            <li>Y:<p id="y">0</p></li>
        </ul>
        
    </div>
</body>
</html>

解决方案 »

  1.   

    这里的事件是由body驱动的 更好的测试offsetX,offsetY测试clientX, clientY 时用document驱动 body是嵌套在document里,就算margin:0; body和document还是有2px的差别
      

  2.   

    说错了clientX, clientY 是相对于浏览器的窗口的文档区域(包括滚动条) 
    这句是先对于document的
    body不包括滚动条