search

chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

区分event对象中的clientX、screenX、offsetX、pageX #40

Open liukexina opened 3 years ago

liukexina commented 3 years ago
  1. clientX\clientY client直译就是客户端，客户端的窗口就是指浏览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距浏览器显示窗口的长度。 兼容性：IE和主流浏览器都支持
  2. offsetX\offsetY offset意为偏移量，是被点击的元素距被点击元素左上角为参考原点的长度，而IE、浏览器和Chrome的参考点有所差异。
    • Chrome下，offsetX offsetY是包含边框的
    • IE、火狐是不包含边框的，如果鼠标进入到border区域，为返回负值 兼容性：IE9+,chrome,火狐都支持此属性
  3. screenX\screenY screen顾名思义是屏幕，是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值需根据屏幕分辨率的尺寸来计算。 兼容性：所有浏览器都支持此属性
  4. pageX\pageY page为页面的意思，页面的高度一般情况client浏览器显示区域装不下，所以会出现垂直滚动条。 鼠标距离页面初始page原点的长度。 pageX = clientX + 横向滚动距离 pageY = clientY + 纵向滚动距离 在IE中没有pageX、pageY取而代之的是event.x、evnet.y。x和y在webkit内核下也实现了，所以火狐不支持x，y。 兼容性：IE不支持，其他高级浏览器支持