CSS BOX(3)

#1 关于移动端canvas如何获取点击坐标

• 首先，PC端与移动端的事件不同。

  PC：

  • mousedown
  • mousemove
  • mouseup

  移动端：

  • touchstart
  • touchmove
  • touchend

• 由于移动端存在多点触控，不能通过e.clientX来获取坐标

• 移动端事件event中存在一个触控集合touches数组，通过取数组的第一个元素来获取坐标位置，即第一个触碰屏幕手指的坐标

  e.touches[0].pageX
  e.touches[0].pageY
  

• 若需要获取全部触碰点的位置，则需要循环数字，逐个处理。

• touchend事件，代表手指离开屏幕，所以touches数组长度为0，所以也无法获取pageX

我们常常用到的是计算触碰点在canvas中的坐标值，可以这样计算：

x = e.touches[0].pageX - canvas.offsetLeft;//横坐标
y = e.touches[0].pageY - canvas.offsetTop;//纵坐标

那，以下有一个关于screenX clientX pageX的总结：

• screenX

  鼠标位置相对于用户屏幕的偏移量，此时参照点是屏幕的左上角

• clientX

  参照点为浏览器内容区域的左上角，该参照点会随滚动条的移动而移动

• pageX

  参照点也是浏览器内容区域，不同的是它不会随滚动条移动。

在实际中使用pageX居多。