移动web点击事件--tap的封装-蒲公英云

移动web点击事件--tap的封装

基础知识点的了解

https://blog.csdn.net/weixin_41105030/article/details/85763149

先来看一个例子，和我封装的tap代码

HTML

<ul>
       <li class="">热门推荐</li>
       <li class="active">潮流女装</li>
       <li class="">品牌男装</li>
       <li class="">内衣配饰</li>
       <li class="">家用电器</li>
       <li class="">电脑办公</li>
       <li class="">手机数码</li>
       <li class="">母婴频道</li>
    </ul>

CSS

*{ 
            margin: 0;
            padding: 0;
            font-size: 13px;
            list-style: none;
        }
        ul{ 
            margin: 50px auto;
            width: 100px;
        }
        li{ 
            width: 100px;
            height: 50px;
            background: #ccc;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        li.active{ 
            background: hotpink;
            color: red;
        }

m端呈现的效果图
在这里插入图片描述

需求：当点击li时，给当前点击的li添加active类，并把li的兄弟元素有active的去掉

click在移动端有延迟，所以要重新封装一个点击事件

Object.prototype.tap = function(callback){

var startTime,startX,startY
this.addEventListener('touchstart',function(e){ 
    if(e.touches.length>1){ 
        return;
    }
    startTime = Date.now()
    startX = e.touches[0].clientX
    startY = e.touches[0].clientY
})
this.addEventListener('touchend',function(e){ 
    if(e.changedTouches.length>1){ 
        return;
    }
    if(Date.now()-startTime > 150){  //长按操作
            return;
     }
    var endX=e.changedTouches[0].clientX;
    var endY=e.changedTouches[0].clientY;
    if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){ 
            callback && callback(e);
       }
})

}

调用tap方法实现需求

var ul = document.querySelector(‘ul’)
var li = ul.querySelectorAll(‘li’)
li.forEach(function(item){
item.tap(function(){
```
   document.querySelector('.active').classList.remove('active')
   this.classList.add('active')
```
}.bind(item))
})

tap事件封装

dom是一个对象，所以我们的dom可以访问到Object的原型上的成员
可以使用普通函数来封装，tap点击会多次调用，重复创建属性和方法消耗内存
封装注意：从touchstart到touchend过程–点击的时间不能过长;点击过程移动范围最好要无限0;点击目标元素只能一个触碰点

tap封装语言解析

Object.prototype.tap = function(callback){ 
   var startTime,startX,startY
   this.addEventListener('touchstart',function(e){ 
       if(e.touches.length>1){ 
           // 判断是否只有一根手指点击，没有点击事件tap不生效
           return;
       }
       startTime = Date.now()
       // 刚触碰目标元素的时间
       startX = e.touches[0].clientX
       // 刚触碰界面时手指距离界面左端（视口）的距离
       startY = e.touches[0].clientY
       // 刚触碰界面时手指距离界面上端（视口）的距离
   })
   this.addEventListener('touchend',function(e){ 
       if(e.changedTouches.length>1){ 
           // 判断过程到结束是否只有一根手指点击
           return;
       }
       if(Date.now()-startTime > 150){  
           //长按操作，如果触碰目标元素的事件太长，则不执行点击事件tap
               return;
        }
       var endX=e.changedTouches[0].clientX;
       var endY=e.changedTouches[0].clientY;
       if(Math.abs(endX-startX) < 6 && Math.abs(endY-startY) <6){ 
           // 我们限制触碰过程中手指不能移动范围过大，我们限制在一个半径为6px的移动范围内
               callback && callback(e)
               // 回调函数--判断是否有传入处理函数，有则调用
          }
   })
}