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

最新推荐文章于 2024-03-16 17:50:45 发布

喵姑娘呀

最新推荐文章于 2024-03-16 17:50:45 发布

阅读量535

点赞数

分类专栏：移动文章标签：移动端tap事件移动端的click事件触摸事件 touch

本文链接：https://blog.csdn.net/weixin_43389331/article/details/96589831

版权

移动专栏收录该内容

0 篇文章 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();
				}
			});
	}
}

喵姑娘呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端tap事件，也称移动端的click事件

pc端的的click事件在移动端也是可以出发的，只是在移动端会出现延迟的现象，早期移动设备浏览器网页时内容比较小，为增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。用触屏事件可以解决这个问题。移动端单击事件时：要注意的问题有：1、单击只有一个手指操作；2、判断手指开...
复制链接

扫一扫