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

梦里梦外; 2022-04-10 10:55 383阅读 0赞

### 解释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)
    	})

### 事件对象 ###

当开始点击打印的事件对象如下图  
![事件对象][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

### TouchList ###

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

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

### targetTouches && touches的区别 ###

1.  targetTouches

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

*  语法

var touches = touchEvent.targetTouches;

console.log(e.targetTouches)  
![打印结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]

1.  touches

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

1.  相同  
    当手指处于 touchend，离开触摸表面

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

![结果][20190104105712348.png]

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

1.  区别

*  这两个在测试时同位置看似打印结果是一致的，只是因为用一根手指点击
 *  如果我用两个手指，一个触摸绑定事件的ul（目标元素），另一个触摸除了此ul的其他地方，那么touches和targetTouches就是有区别的了  
    touches依旧可以获得两个触摸点的信息列表，而targetTouches只能获取一个触摸点的信息列表，（即绑定事件的ul（目标手指）上的那个触摸点）。
 *  **targetTouches只能获取到在其目标元素所有手指的触碰对象，而touches只要有手指在目标元素上，屏幕上其它触碰点也能获取到**

### changedTouches ###

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

### 其它触碰对象 ###

### click ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220331/e6844cefae5e4222b19d911f5ab9f20a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220331/a15630822e2342c3b62be29b4147fcec.png
[20190104105712348.png]: /images/20220331/b9bcc0149df74a37a48ae448eece9253.png