黑马程序员技术交流社区

标题: 【上海校区】手指触摸相关的touch事件并实现滑动轮播图 [打印本页]

---

作者: 时间留下最真    时间: 2019-4-26 14:19
标题: 【上海校区】手指触摸相关的touch事件并实现滑动轮播图

手指触摸相关的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] 纯文本查看 复制代码

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

  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2