Skip to main content

Touch事件

  • TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

  • Touch

代表用户手指与触摸平面间的一个接触点.

  • TouchList

代表一系列的 Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

事件类型​

  • touchstart : 触摸开始（手指放在触摸屏上）
  • touchmove : 拖动（手指在触摸屏上移动）
  • touchend : 触摸结束（手指从触摸屏上移开）
  • touchenter ：移动的手指进入一个 dom 元素。
  • touchleave ：移动的手指离开一个 dom 元素。

还有一个 touchcancel，是在拖动中断时候触发。

事件属性：​

每个触摸事件都包括了三个触摸属性列表：

  • touches：当前位于屏幕上的所有手指触摸点的一个列表。
  • targetTouches：当前元素对象上所有触摸点的列表。
  • changedTouches：涉及当前事件的触摸点的列表

它们都是一个数组，每个元素代表一个触摸点。 每个触摸点对应的 Touch 都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY

其中 screenX/screenY 代表事件发生的位置对于屏幕的偏移量，clientX/clienYt 和 pageX/pageY 都代表事件发生位置对应对象的偏移量，不过区别是 clientX/clientY 不包括对象滚动而隐藏的偏移量，而 pageX/pageY 包括对象滚动而隐藏的偏移量。移开屏幕的那个触摸点，只会包含在 changedTouches 列表中，而不会包含在 touches 和 targetTouches 列表中， 所以 changedTouches 在项目当中会比较常用。

参考​