移动web：事件-手指事件

YYQingJs

已于 2022-11-29 08:50:46 修改

阅读量594

点赞数

CC 4.0 BY-SA版权

分类专栏：移动web 文章标签： javascript html5 前端 html

于 2022-11-28 17:12:06 首次发布

本文链接：https://blog.youkuaiyun.com/YYQingJs/article/details/128082292

移动web 专栏收录该内容

2 篇文章

订阅专栏

本文详细讲解了touchstart, touchmove, touchend事件在移动设备上的应用，并通过示例展示了如何实现元素拖动，包括获取触点坐标、跟踪移动及目标元素变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        box.addEventListener('touchstart',function(){
			console.log("手指按下");
		})
		box.addEventListener('touchmove',function(){
			console.log('手指移动中');
		});
		box.addEventListener('touchend',function(){
			console.log("手指松开");
		});

手指按下事件：ontouchstart

手指移动事件：ontouchmove

手指松开事件：ontouchend

TouchEvent对象：

touches：位于屏幕上所有的手指

targetTouches: 位于当前元素上所有的手指【移动开发推荐使用】

changedTouches：手指按下事件时 ontouchstart 包含所有按下的手指；手指松开事件时 ontouchend 包含所有松开的手指

screenX和screenY：相对于屏幕到当前位置的x和y距离

clientX和clientY：相对于可视窗口到当前位置的x和y距离【移动开发推荐使用】

pageX和pageY：相对于可视窗口（包含超出元素边框滚动条）到当前位置的x和y距离【移动端基本上不存在x超出最大也就是100%】

获取触发特定事件的元素：e.target

拖动演示案例：

        let startX,startY,moveX,moveY,targetX,targetY;
		document.addEventListener('touchstart',function(e){
			startX = e.targetTouches[0].clientX;
			startY = e.targetTouches[0].clientY;

			//获取当前元素的transform 判断是否存在原先拖动的痕迹
			targetTf = e.target.style.transform;
			targetX = 0;
			targetY = 0;
			if(targetTf) {
				let r_targetX = /\((.*?)px/;
				let r_targetY = /, (.*?)px/;
				targetX = parseInt(targetTf.match(r_targetX)[1]);
				targetY = parseInt(targetTf.match(r_targetY)[1]);
			}
		})
		document.addEventListener('touchmove',function(e){
			moveX = e.targetTouches[0].clientX;
			moveY = e.targetTouches[0].clientY;
			let distanceX = moveX - startX + targetX;
			let distanceY = moveY - startY + targetY;
			e.target.style.transform = "translate("+distanceX+"px,"+distanceY+"px)";
		});
		document.addEventListener('touchend',function(e){
			console.log();
		});