学习笔记：移动端事件

移动端事件学习笔记

分类：

• 触摸事件
  • touch事件
  • pointer事件，就是集合touch事件和PC点击事件
• 手势事件，多个手指头触点事件
• 传感器事件，设备硬件传感

touch事件

• touchstart：手指触摸开始时候回调
• touchmove：手指触摸移动时候回调
• touchend：手指触摸结束时候回调

IE8以上可以使用addEventListener监听：

	addEventListener('touchstart', callback, false);// 冒泡监听

touch event属性：

常用属性：

• altkey：是否按下了alt键
• type：当前操作的类型
• target：当前触发的元素
• changedTouches：手指触摸信息变化列表，多点触控时候会有多个数组信息
• targetTouches：监听目标上的触摸点列表
• touches：屏幕所有触摸点列表

changedTouches，targetTouches，touches区别：

• 当四指触摸屏幕，其中两个在监听目标区域，并且一个在目标区域内移动，这个时候三个的值分别为：
• changedTouches = 1
• targetTouches = 2
• touches = 4

changedTouches，targetTouches，touches在touchstart、touchend中event的区别：

• touchstart中的changedTouches，targetTouches，touches都是有值的。
• touchend中只有changedTouches有值，因为targetTouches和touches描述的是触摸的节点，而此时手指已经离开屏幕。

其他触摸事件/高级触摸事件

• 指双击、长按、旋转、滑动、缩放、多指等事件
• 移动端本身不支持这类高级事件，但是可以利用touch事件进行封装，比如长按事件，可以在按下计时，2.5s后没有touchend和touchmove则认为是长按。

HAMMER.js

• 高级触摸事件封装库
• 监听panmove，event事件：
  • deltaX：移动的x距离
  • deltaY：移动的Y距离
  • deltaTime：移动时间