event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解

目录

 offset 

 client

 screen

  page

  window.innerWidht

offset 

offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点(左上角)的距离,而不同浏览器参考原点的位置不尽相同,FF及Chrome中参考原点为内容区域左上角,不包含元素边框

  • offsetX      鼠标当前点击位置距离当前点击元素内容区域最左边(不包含边框)的距离
  • offsetY      鼠标当前点击位置距离当前点击元素内容区域最上边(不包含边框)的距离

   点击不同位置,参考原点不同,则距离不同 

以下四个点可供理解offset的相对位置及尺寸

event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解

 client

clientX、clientY为当前鼠标点击位置距离浏览器显示内容窗口左上角的距离,总是获取当前点击位置距离窗口左上角的距离

  • clientX      鼠标当前点击位置距离浏览器窗口内容区域最左边的距离
  • clientY      鼠标当前点击位置距离浏览器窗口内容区域最上边的距离

    点击不同位置,参考点不会改变 

以下3个点可供参考client的相对位置及尺寸

event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解

 screen

screenX、screenY为鼠标当前点击位置距离电脑桌面左上角的距离,总是参考桌面进行定位,获取尺寸。

  • screenX      鼠标当前点击位置距离桌面窗口最左边的距离
  • screenY      鼠标当前点击位置距离桌面窗口最上边的距离

如图解释

 

event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解

page

pageX、pageY和clientX、clientY很相似,但是不同点在于:

  • pageX      pageX = clientX + 横向滚动距离
  • pageY      pageY = clientY + 纵向滚动距离

 

window.innerWidht   window.innerHeight

  • window.innerWidth       返回当前浏览器可视内容区域的宽度
  • window.innerHeight      返回当前浏览器可视内容区域的高度

当进行浏览器窗口缩放时,会改变当前浏览器可视内容区域的尺寸,影响window.innerWidth、window.innerHeight的大小

 

outerWinth、outerHeight与innerWidth、innerHeight的区别在于outerWidth计算了内容区域及工具栏,滚动条在内的总宽高