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

ゝ一世哀愁。 2022-03-30 02:18 228阅读 0赞

### 基础知识点的了解 ###

[https://blog.csdn.net/weixin\_41105030/article/details/85763149][https_blog.csdn.net_weixin_41105030_article_details_85763149]

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

HTML

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端呈现的效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]

### 需求：当点击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);
               }
    	})
    }

1.  调用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)
                   // 回调函数--判断是否有传入处理函数，有则调用
              }
       })
    }

[https_blog.csdn.net_weixin_41105030_article_details_85763149]: https://blog.csdn.net/weixin_41105030/article/details/85763149
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220330/3a7c3025d16d4008bd5f1bfe656c728b.png