移动web点击事件touch和事件对象--常用知识点解析

解释touch

1. touch是移动端的触摸事件 而且是一组事件
2. touchstart 当手指触摸屏幕的时候触发
3. touchmove 当手指在屏幕上滑动时触发:move事件是持续触发
4. touchend 当手指离开屏幕的时候触发
5. touchcancel 当被迫终止滑动的时候触发（来电，弹消息等触碰意外）

绑定事件

使用addEventListener进行绑定,如下

var ul = document.querySelector('ul')
ul.addEventListener('touchstart',function(e){
		console.log(e)
	})
           

事件对象

当开始点击打印的事件对象如下图

TouchList

一个 TouchList 代表一个触摸平面上所有触点的列表; 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch 对象, 共计三个.

触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合

targetTouches && touches的区别

1. targetTouches

一个TouchList，包含所有仍与触摸平面接触并且touchstart事件与当前事件在同一个目标元素上（ target element ）发生的Touch对象。

• 语法

console.log(e.targetTouches)

1. touches

一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。

1. 相同

   当手指处于 touchend，离开触摸表面

ul.addEventListener('touchend',function(e){
		console.log(e.targetTouches)
		console.log(e.touches)
	})
           

• 可见：在离开屏幕的时候两者无法记录触摸点
• 当处于touch事件中也可见：都可以获得一个TouchList列表，里面包含了触碰点的信息。

1. 区别

• 这两个在测试时同位置看似打印结果是一致的，只是因为用一根手指点击

• 如果我用两个手指，一个触摸绑定事件的ul（目标元素），另一个触摸除了此ul的其他地方，那么touches和targetTouches就是有区别的了

  touches依旧可以获得两个触摸点的信息列表，而targetTouches只能获取一个触摸点的信息列表，（即绑定事件的ul（目标手指）上的那个触摸点）。

• targetTouches只能获取到在其目标元素所有手指的触碰对象，而touches只要有手指在目标元素上，屏幕上其它触碰点也能获取到

changedTouches

每个事件都会记录； 当手指松开时候(touchend)，意味着当前元素上已经没有手指对象了,所以无法通过targetTouches来获取手指对象，则这时候要使用changedTouches

其它触碰对象

click

click会有200ms到300ms的延迟，所以我们在使用的时候可以进行封装，或则使用zepto.js的tap来实现点击