一.touch事件
1. 移动端新增的4个与手指触摸相关的事件
1. touchstart : 手指放在屏幕上时触发
2. touchmove : 手指在屏幕上滑动时触发(会触发多次)
3. touchend : 手指离开屏幕时触发
4. touchcancel : 系统取消touch事件时候触发,比如电话
2. 每次触摸被触发后,会生成一个event对象,event对象中changedTouches会记录手指滑动的信息
1. e.touches 当前屏幕上的手指
2. e.targetTouches 当前dom元素上的手指
3. e.changedTouches 触摸时发生改变的手指
3. 这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,属性有
1. clientX / clientY 触摸点相对浏览器窗口的位置
2, pageX / pageY 触摸点相对于页面的位置
二.通过touch滑动轮播图
//1. 给ul注册touch相关的三个事件(注意清除浮动,不然触发不到touchmove事件)
//2. 在touchstart中
//1. 记录开始的位置
//2. 清除定时器
//2. 在touchmove中
//1. 记录移动的距离
//2. 清除过渡
//3. 让ul跟着移动
//3. 在touchend中
//1. 记录移动的距离
//2. 判断移动距离是否超过1/3屏,判断上一屏还是下一屏,或者是吸附
//3. 添加过渡
//4. 执行动画
//5. 开启定时器
//4. 优化:快速滑动的实现逻辑
//5. 优化:重置大小时轮播图错位。
三 . 关于tap事件和click事件
-
click事件在pc端非常用,但是在移动端会有300ms左右的延迟,比较影响用户的体验,300ms用于判断双击还是长按事件,只有当没有后续的的动作发生时,才会触发click事件
-
tap事件只要轻触了,就会触发,体验更好。
/* * 由于移动端的点击事件click 有300左右的延迟, 用户体验有待提升 * 希望 能用touch事件封装一个相应速度更快的 点击事件 tap * * touch判断为点击事件的条件: * * 1、触屏开始 到触屏结束 手指没有移动 * 2、接触屏幕的时间 小于指定的值 150ms * * * 满足以上两个条件 可以认为是点击事件触发了 * */ /* * 插件功能: * 给指定的元素 绑定优化后的移动的点击事件--- tap事件 * 参数: * obj:要绑定优化后点击事件的元素 * callback: 当点击事件触发 执行什么操作 * */ var itcast={ tap:function(obj,callback){ if(typeof obj=='object'){ //判断传入的obj是否为对象 var startTime=0;//记录起始事件 var isMove=false; //记录是否移动 obj.addEventListener('touchstart',function(){ startTime=Date.now(); //获取当前时间戳 }); obj.addEventListener('touchmove',function(){ isMove=true; //记录移动 }); obj.addEventListener('touchend',function(e){ //判断是否满足点击的条件 if(!isMove&&Date.now()-startTime<150){ //tap点击事件触发 //if(callback){ // callback(); //} callback&&callback(e); } //数据重置 isMove=false; startTime=0; }); } } }