前端事件属性之offsetX,offsetY,clientX,clientY,screenX,screenY,pageX,pageY

391 阅读1分钟

属性区别示意图.png

  • offsetX和offsetY:点击位置相对于事件发生元素左上角的距离;
  • clientX和clientY:点击位置相对于客户端区域的左上角的距离(不论页面是否有水平滚动);
  • screenX和screenY:点击位置相对于电脑显示器左上角的距离;
  • pageX和pageY:点击位置相对于整个文档(document)的左上角的距离(包含滚动的距离,主要是document文档滚动的距离,与内部元素的滚动距离无关);

扩展

  • 1、浏览器缩放,zoom属性对元素的缩放,transform属性缩放后的各个属性的变化;