[学习交流] 【上海校区】手指触摸相关的touch事件并实现滑动轮播图

本帖最后由时间留下最真于 2019-4-26 14:21 编辑

手指触摸相关的touch事件并实现滑动轮播图,以及移动端中tap和click事件

一.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滑动轮播图

[JavaScript] 纯文本查看 复制代码

//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事件只要轻触了，就会触发，体验更好。

[JavaScript] 纯文本查看 复制代码

/*[/color][/p] * 由于移动端的点击事件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;
            });
        }
    }
}

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】手指触摸相关的touch事件并实现滑动轮播图

0 个回复