screenX clientX pageX的区别

在vue中，给元素绑定事件时，可以打印e（事件）

• 触摸事件（TouchEvent）和鼠标（MouseEvent）事件

• 在e事件中就可以找到screenX clientX pageX这三个参数了，即执行相关事件时就可以获取到这些参数，那这三个参数的区别又是什么呢

  
  image.png

区别

TouchEvent

1、clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，也就是说，他计算left或top时直接忽略了滚动条的高和宽，它的参考点是浏览器可见区域的左上角，而不是页面本身的body左上角原点，计算数值和滚动条是否滚动没有关系，只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离，忽略了滚动条的存在。（不受滚动条影响）

2、pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而变动，它在计算时其实是以body左上角原点（即页面本身的左上角，而不是浏览器可见区域的左上角）为参考点计算的，这个相当于已经把滚动条滚过的高或宽计算在内了，所以无论滚动条是否滚动，他都是一样的距离值。（受滚动条影响）

3、screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。（即用户点击处在电脑显示屏幕所在的位置）

MouseEvent

和TouchEvent差不多，就是输出时的位置有稍许区别