鼠标位置相关属性

1、offsetX,offsetY:

是event的属性，非DOM元素的属性

含义：设置或者是得到鼠标相对于目标事件的父元素的位置，从父元素的边框位置计算起。

IE中的属性，经测试新版的chrome 、FF都支持（测试环境 chrome43 FF34）

2、pageX，pageY

是event的属性，非DOM元素的属性

含义：相对于页面的位置

主流浏览器如FF chrome支持 ie8及以下不支持（但是IE中有一个替补属性 e.x,e.y 和pageX、Y是一样的效果）

3、offsetLeft、offsetTop

offsetTop、left：是DOM元素的属性，都支持但浏览器解析不一样
在IE7及以下：直接相对于父元素
IE8以及其他浏览器：该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，如果没有找到，则是相对于根元素 html的位置（而不是body）

4、浏览器默认的margin padding值
关于body的padding margin：

主流浏览器和IE8： margin：8px
ie7以及以下：margin:15px padding:medium

5、offsetParent

含义: 向上寻找父元素，且父元素使用了定位方式。如果向上找不到定位的父元素，则返回body

否则返回这个定位的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouse position</title>
    <style>
    /* body{margin:0;padding:0;} */
    #posDiv{
        /* position: relative;  */
        width:800px;
        height:500px;
        border:1px solid red;

        }
        #noposDiv{
            width:100px;
            height: 100px;
            border:10px solid green;
            margin-left:100px;
            
        }
        

    </style>
</head>
<body>

   <div id="posDiv">
          <div id="noposDiv">
          </div>
   </div>

   <script>
   var offParent = document.getElementById('noposDiv').offsetParent;
   console.log('offParent',offParent);

   /**
    * offsetX,offsetY:是event的属性，IE 和新版的chrome 、FF都支持
    * pageX : ie8及以下不支持，其他主流浏览器FF chrome支持
    *
    * offsetTop、left：是DOM元素的属性，都支持  但浏览器解析不一样
    *     在IE7及以下：直接相对于父元素
    *      IE8以及其他浏览器：该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的，设置了position的父对象”中的位置，如果没有找到，则是相对于根元素 html的位置
    *
    *
    * 关于body的padding margin：  主流浏览器和IE8： margin：8px  
    *                             ie7以及以下：margin:15px padding:medium
    *
    * offsetParent:  向上寻找父元素，且父元素使用了定位方式。如果向上找不到定位的父元素，则返回body
    *                 否则返回这个定位的父元素。
    * @type {[type]}
    */
   var noposDiv = document.getElementById('noposDiv');
   if(noposDiv.addEventListener){
           noposDiv.addEventListener('click',function (e){
            
               var evtx = e.offsetX;
               var evty = e.offsetY;
               var pagex = e.pageX;
               var pagey = e.pageY;
               var offLeft = noposDiv.offsetLeft;
               var offTop = noposDiv.offsetTop;
               var x = e.x;
               var y = e.y;

               console.log('offsetx y',evtx,evty);
               console.log('pagex y',pagex,pagey);
               console.log('div元素的属性 offLeft ',offLeft,offTop);
               console.log('e.x,e.y',e.x,e.y);   ///在chrome中 与pageX一样；  FireFox不支持该属性

           },false);
   }else if(noposDiv.attachEvent){
        noposDiv.attachEvent('onclick',function (e){
                var evtx = e.offsetX;
               var evty = e.offsetY;
               var pagex = e.pageX;
               var pagey = e.pageY;
               var offLeft = noposDiv.offsetLeft;
               var offTop = noposDiv.offsetTop;
               var x = e.x;
               var y = e.y;

               console.log('offsetx y',evtx,evty);
               console.log('pagex y',pagex,pagey);
               console.log('div元素的属性 offLeft ',offLeft,offTop);
               console.log('e.x,e.y',e.x,e.y);

        });

   }


   </script>
    
</body>
</html>

相关阅读:
as3.0 网络通信
 flash显示html
[javascript]对象
 hibernate
远程服务
 [mysql]笔记1
[笔记]深入剖析Tomcat－tomcat的默认连接器,servlet容器
 [java]关于访问权限
 [笔记]http权威指南(2)
[笔记]http权威指南
原文地址：https://www.cnblogs.com/lydialee/p/4819093.html