【移动端】事件（touchstart、touchmove、touchend、touchcancel）跟事件对象属性（changedTouches、targetTouches、touches）

事件

事件类型

• touchstart 元素上触摸开始时触发

  touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换

• touchmove 元素上触摸移动时触发

  touchmove 事件可用于页面的滑动特效，网页游戏，画板

• touchend 手指从元素上离开时触发

  touchend 事件主要跟 touchmove 事件结合使用

• touchcancel 触摸被打断时触发

  touchcancel 使用率不高

注意：

touchmove 事件触发后，即使手指离开了元素，touchmove 事件也会持续触发

事件绑定

1. 方式一：

   box.ontouchstart = function(){
   	console.log('touch start')
   }
   

2. 方式二（推荐使用）：

   box.addEventListener('touchstart', function(){
   	console.log('touch start')
   })
   

事件对象属性

touch 事件对象中有 3 个非常重要的属性

• changedTouches
• targetTouches
• touches

他们分别在touchstart、touchmove 、三个事件中有着不同的作用

在touchstart 事件中

• changedTouches 为当前在元素上同时按下的触点对象数组
• targetTouches 为按下后，当前元素上的触点对象数组
• touches 为按下后，当前屏幕上所有的触点对象数组

在 touchmove 事件中

• changedTouches 为当前在元素上同时滑动的触点对象数组
• targetTouches 为滑动时，当前元素上的触点对象数组
• touches 为滑动时，当前屏幕上所有的触点对象数组

在 touchend 事件中

• changedTouches 为当前在元素上同时抬起的触点对象数组
• targetTouches 为结束时，当前元素上的触点对象数组
• touches 为结束时，当前屏幕上所有的触点对象数组