兼容IE、Firefox获取鼠标位置

最新推荐文章于 2024-09-11 12:01:27 发布

z-pan

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量91

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/lxj2008/p/3575165.html

版权

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>获取鼠标位置（兼容）</title>
        <style>
            body{width:600px;}
        </style>
    </head>

    <body>

        <script>
            function mouseMove(ev) {
                ev = ev || window.event;
                var mousePos = mouseCoords(ev);
                //alert(ev.pageX);
                document.getElementById('xxx').value = mousePos.x;
                document.getElementById('yyy').value = mousePos.y;
            }

            function mouseCoords(ev) {
                if (ev.pageX || ev.pageY) {
                    return {
                        x : ev.pageX,
                        y : ev.pageY
                    };
                }
                return {
                    x : ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y : ev.clientY + document.body.scrollTop - document.body.clientTop
                };
            }

            document.onmousemove = mouseMove;
        </script>
        <p>
            <label for="xxx">Mouse X Position:<input id="xxx" type="text"></label>
        </p>
        <p>
            <label for="yyy">Mouse y Position:<input id="yyy" type="text"></label>
        </p>
    </body>