【javascript坐标】——event.x、event.clientX、event.offsetX、event.screenX 用法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

 

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标。

 

<scripttype="text/javascript">

       // 火狐的版本

       // e.clientX    与浏览器页面区域左上角为原点

       // e.screenX

       // e.layerX     与浏览器页面区域左上角为原点

       //  在ie8中，没有layerX属性，但是有offsetX表示这个div区域的坐标

       //  event.offsetX

       // 在新的浏览器中获得以这个div左上角为原点的做法需要根据页面的

       // 左上角坐标-div距离页面左边的距离。。。

       // 获得这个div的各个参数使用div.offsetLeft

       // div.offsetWidth...

 

       onload = function () {

           document.getElementById("dv").onclick = function (e) {

                // ie

                /*

                var x = event.offsetX;

                var y = event.offsetY;

 

                alert(x + ", " + y);

                */

 

               // 火狐里

                /*

                var x = e.layerX -this.offsetLeft;

                var y = e.layerY -this.offsetTop;

 

                alert(x + ", " + y);

                */

                // e.pageX

 

                var x = e.layerX;

                var y = e.layerY;

 

                alert(x + ", " + y);

 

                if (e) {

                    // 火狐或IE11

                } else {

                    // IE低版本

                }

           };

       };

</script>