touch.pageX/touch.screenX/touch.clientX的区别

摘定义：

pageX : 触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移.

screenX : 返回触点相对于屏幕左边沿的的X坐标. 不包含页面滚动的偏移量.

clientX : 返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.

具体差别如下：
做了一个带滚动条的demo。

当我们正常点击时，返回的内容都是相同的，都是距离最左侧的距离。

而当我们拖动滚动条时，再点击中间某个地方，发现pageX的值明显大于另外两个，那么我们容易知道，pageX相对左侧的距离是包含滚动条的距离，而其余两个不包含。

接下来我们将页面缩小，也就是页面在电脑中并不是最大化显示。此时我们发现screenX的值大于其余两个，那么很容易知道，screenX的相对左侧是相对于电脑屏幕的左侧（也就是使用设备的左侧），而pageX和clientX都是相对于浏览器的。

此时在缩放过的浏览器中将滚动条向右侧移动，并点击中间某个位置，得到下图：

总结：
1.pageX是事件点击位置相对于浏览器左侧的距离，并且包含滚动条的距离。
2.screenX是事件点击位置相对于电脑屏幕（设备）的左侧距离，但是不包含滚动条的距离。
3.clientX是事件几点位置相对于浏览器左侧的距离，但是不包含滚动条的距离。