event、dom 位置信息

本文所有属性信息，均在chrome环境下。

一、测试dom

  
  


 
1
 
2
 
3

 

   4
   
5
 
 

   6
   
7
 

二、属性位置信息

event

• clientX/clientY：鼠标指针相对浏览器内容区域的水平/垂直坐标；
• layerX/layerY： 鼠标指针相对当前元素的水平/垂直坐标，包括边框；
• offsetX/offsetY：鼠标指针相对当前元素的水平/垂直坐标，不包括边框；
• pageX/pageY：鼠标指针相对浏览器内容区域的水平/垂直坐标；
• screenX/screenY：鼠标指针相对桌面的水平/垂直坐标；

dom

• clientWidth/clientHeight：元素宽/高，不包括边框；
• clientLeft/clinetTop：元素边框；
• offsetWidth/offsetHeight：元素宽/高，包括边框；
• offsetLeft/offsetTop：元素距离父级元素水平/垂直坐标。