移动端事件
一、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 !