计算移动端网页滑动距离

最新推荐文章于 2022-09-05 08:00:00 发布

转载最新推荐文章于 2022-09-05 08:00:00 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/daladida/blog/739751

文章标签：

#前端 #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
	<title>懒人原生touch事件，计算滑动距离</title>
	<style>
	*{margin:0;padding:0;}
	#demo{width:100%;height:500px;float:left;}
	</style>
</head>
<body>
<div id="demo">
	请用移动设备访问，滑动屏幕后即可弹出滑动距离
</div>
<script>
	var b = document.getElementsByTagName("body")[0];
	b.addEventListener("touchmove", function(e){
		e.preventDefault();
	});
	(function(){
		var startX,startY,endX,endY,moveLength;
		var el = document.querySelector("#demo");
		//获取点击开始的坐标
		el.addEventListener("touchstart", function (e){
			startX = e.touches[0].pageX;
			startY = e.touches[0].pageY;
		});
		//获取点击结束后的坐标
		el.addEventListener("touchend", function(e){
			endX = e.changedTouches[0].pageX;
			endY = e.changedTouches[0].pageY;
			var x = Math.abs(endX - startX);
			var y = Math.abs(endY - startY);
			//长方形的斜边长 = 两个直线的平方的和的平方根
			moveLength = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
			alert("本次的移动距离为："+moveLength);
		})
	})();
</script>
</body>
</html>

转载于:https://my.oschina.net/daladida/blog/739751