js判断手指的上/下/左/右滑动事件监听

最新推荐文章于 2023-08-18 13:57:49 发布

快起来搬砖了

最新推荐文章于 2023-08-18 13:57:49 发布

阅读量410

点赞数

分类专栏： JavaScript 文章标签： js jquery

本文链接：https://blog.csdn.net/weixin_44590591/article/details/107318108

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="jquery.js"></script>
	</head>
	<body>
		<div id="content" style="height:20rem;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>

	</body>
	<script>
		var windowHeight = $(window).height(),
			$body = $("#content");
		// console.log($(window).height()); 
		// console.log($('body').height()); 
		$body.css("height", windowHeight);
		$("#content").on("touchstart", function(e) {
			e.preventDefault();
			startX = e.originalEvent.changedTouches[0].pageX,
				startY = e.originalEvent.changedTouches[0].pageY;
		});
		$("#content").on("touchmove", function(e) {
			e.preventDefault();
			moveEndX = e.originalEvent.changedTouches[0].pageX,
				moveEndY = e.originalEvent.changedTouches[0].pageY,
				X = moveEndX - startX,
				Y = moveEndY - startY;
			if (Math.abs(X) > Math.abs(Y) && X > 0) {
				alert("左 → 右");
			} else if (Math.abs(X) > Math.abs(Y) && X < 0) {
				alert("右 → 左");
			} else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
				alert("上 → 下");
			} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
				alert("下 → 上");
			} else {
				alert("just touch");
			}
		});
	</script>
</html>

快起来搬砖了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js判断手指的上/下/左/右滑动事件监听

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="j
复制链接

扫一扫

专栏目录