移动端事件

一、touch事件

PC端的鼠标事件无法满足移动设备触摸屏的特点， touch事件是移动端特有的

#1. 事件类型

touchstart 开始触摸

touchmove  手指滑动

touchend   触摸结束

touchcancel 触摸意外中断 (如:前女友的来电)

 

#2. touch事件的基本用法

移动端不支持dom0级，只能通过dom2级绑定事件

// 开始触摸
box.addEventListener('touchstart',function(){
    console.log('我就摸一下');
});

 

// 手指滑动
box.addEventListener('touchmove',function(){
    console.log('轻轻的扒拉扒拉');
});

 

// 触摸结束
box.addEventListener('touchend',function(){
    console.log('下次再来');
});

 

#3. touchEvent事件对象的额外三个属性

touches  TouchList对象,存放的是屏幕上的所有的触点

targetTouches TouchList对象,存放的是当前元素上面的所有的触点

changedTouches TouchList对象,存放的是发生变化的触点

// 开始触摸
box.addEventListener('touchstart', function(e) {
    console.log(e.touches);  // length 1
    console.log(e.targetTouches);  // length 1
    console.log(e.changedTouches);  // length 1
});

// 触摸结束
box.addEventListener('touchend', function(e) {
    console.log(e.touches);  // length 0
    console.log(e.targetTouches);  // length 0
    console.log(e.changedTouches);  //// length 1
});

 

在结束触摸事件 (touchend) 中,touches 和 targetTouches中的触点信息会被清空

一般使用  changedTouches获取触点信息

 

#二、封装移动端常用事件

#1. 封装点击事件

#为什么要封装点击事件？

click 事件有300ms的延迟

touch 事件只要触摸屏幕就会触发，很多时候我们只是要滑动屏幕

 

#如何封装？

1. 通过touch事件模拟

2. 声明变量记录是否产生移动

3. 声明变量记录触摸开始和结束的时间差

4. 当未产生移动并且时间差在150ms内，认定为点击

5. 执行点击后的回调函数

6. 重置记录的值

7. Come on! Try to achieve it! (你是最胖的)

 

#2.封装滑动事件

1. 通过touch事件模拟

2. 记录开始触点位置和最后移动触点位置

3. 两个触点坐标的位移达到 30 ( 绝对值相减 )，认定为发生滑动

4. 当水平位移的距离大于垂直位移的距离，则认定为水平滑动；反之则是垂直滑动。

5. 再根据两触点位移的正负差值,判断滑动方向

6. just do it,fighting !