移动web学习(二) --- 手指触摸相关的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滑动轮播图

//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事件

1. click事件在pc端非常用，但是在移动端会有300ms左右的延迟，比较影响用户的体验，300ms用于判断双击还是长按事件，只有当没有后续的的动作发生时，才会触发click事件

2. 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;
               });
           }
       }
   }