移动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的去掉

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

2. 调用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事件封装

1. dom是一个对象，所以我们的dom可以访问到Object的原型上的成员
2. 可以使用普通函数来封装，tap点击会多次调用，重复创建属性和方法消耗内存
3. 封装注意：从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)
               // 回调函数--判断是否有传入处理函数，有则调用
          }
   })
}