移动端tap事件，也称移动端的click事件

骑猪看日落 2021-12-01 12:26 424阅读 0赞

pc端的的click事件在移动端也是可以出发的，只是在移动端会出现延迟的现象，早期移动设备浏览器网页时内容比较小，为增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。用触屏事件可以解决这个问题。  
移动端单击事件时：要注意的问题有：  
1、单击只有一个手指操作；  
2、判断手指开始触摸和手指松开的时间差异不能大于一定值：300/150；这就类似是长按操作判断。  
3、保证没有滑动操作，如果有，要保证在一定范围内。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    		<title></title>
    		 <style>
    	        div{
    	            width: 100px;
    	            height: 200px;
    	            background-color: red;
    	        }
    	    </style>
    	</head>
    	<body>
    		<div></div>
    		<script>
    			//单击只有一个手指操作；判断手指开始触摸和手指松开的时间差异不能大于一定值：300/150；保证没有滑动操作，如果有，要保证在一定范围内。
    			
    			var div = document.querySelector("div");
    			
    			var startTime, startX, startY;
    			div.addEventListener("touchstart", function(e){
    				//判断是否只有一根手指
    				if(e.targetTouches.length > 1){
    					return;
    				}
    				//记录当前手指开始触摸的时间
    				startTime = Date.now();
    				//当前坐标
    				startX = e.targetTouches[0].clientX;
    				startY = e.targetTouches[0].clientY;
    			});
    			div.addEventListener("touchend", function(e){
    				//判断是否只有一根手指在操作
    				if(e.targetTouches.length > 1){//多个
    					return;
    				}
    				//判断时间差异 150ms
    				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){
    					console.log("tap事件")
    				}
    			});
    		</script>
    	</body>
    </html>

\*\*封装tap事件

//封装移动端的tap事件
    
    var itcast = {
    	tap: function(domEle, callback){
    		//判断传如对象是否是dom元素
    		if(!domEle || typeof domEle != "object"){
    			return;
    		}
    			var startTime, startX, startY;
    			domEle.addEventListener("touchstart", function(e){
    				//判断是否只有一根手指
    				if(e.targetTouches.length > 1){
    					return;
    				}
    				//记录当前手指开始触摸的时间
    				startTime = Date.now();
    				//当前坐标
    				startX = e.targetTouches[0].clientX;
    				startY = e.targetTouches[0].clientY;
    			});
    			domEle.addEventListener("touchend", function(e){
    				//判断是否只有一根手指在操作
    				if(e.targetTouches.length > 1){//多个
    					return;
    				}
    				//判断时间差异 150ms
    				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){
    					console.log("tap事件");
    					//判断是否传入回调函数
    					callback && callback();
    				}
    			});
    	}
    }