移动端 jquery 长按触发移动事件 <升级版>

最新推荐文章于 2024-03-19 21:16:55 发布

师远鹏

最新推荐文章于 2024-03-19 21:16:55 发布

阅读量1.7w

点赞数 1

分类专栏： Html 5 JQuery javascript小技巧

本文链接：https://blog.csdn.net/shipeng22022/article/details/50111437

版权

javascript小技巧同时被 3 个专栏收录

47 篇文章 25 订阅

订阅专栏

JQuery

22 篇文章 0 订阅

订阅专栏

Html 5

5 篇文章 0 订阅

订阅专栏

长按触发移动事件，可以用于手机界面上返回导航图标等等

将代码拷贝到本地，进行测试

在手机端测试，或者通过谷歌浏览器F12 测试

增加了对长按时间的判断，区分单击事件和长按事件

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>测试触摸事件</title>

		<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
		<style>
			#mydiv {
				position:fixed;
				left:10px;
				top:10px;
				background-color:gray;
				width:100px;
				height:80px;
				z-index:10;
				display: block;
	
			}
		</style>
	</head>

	<body>
		<div id="mydiv">out</div>
	</body>

</html>

<script>
	/*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/  
	var timeout = undefined;
	var x=0;
	var y=0;
	var state=0;
	var lastTime=null;	
	var nowTime=null;

	var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	$(function () {
		/*触摸移动*/
		$("#mydiv").on("touchmove", function (event) {
			event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
			if(state==1){
					//start_x=0;
					//var start_x = event.originalEvent.targetTouches[0].clientX + document.body.scrollLeft - document.body.clientLeft;
		      var start_y = event.originalEvent.targetTouches[0].clientY+ document.body.scrollTop - document.body.clientTop;
				
					//x=start_x;
					y=start_y;
					//$("#mydiv").css("left",x);
					$("#mydiv").css("top",y);
					$("#mydiv").html(y);
					
					var top=$("#mydiv").css("top").substring(0,$("#mydiv").css("top").length-2);
					if(top <= 10){
							$("#mydiv").css("top",10);
							return false;
					}
					if(top >= (h-10-$("#mydiv").height())){
							$("#mydiv").css("top",h-10-$("#mydiv").height());
					}
			}
		});
		
		
		$("#mydiv").on("touchstart", function (event) {
			lastTime=new Date().getTime();
			event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
			clearTimeout(timeout);
			state=0;
			timeout = setTimeout(function() {
				state=1;
			}, 1000);
			
		});
		
		
		$("#mydiv").on("touchend", function (event) {
			event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
			clearTimeout(timeout);
			state=0;
			nowTime=new Date().getTime();
			var timeLength=nowTime-lastTime;
			if(timeLength<1000){
				$("#loadLayer").show();
				window.history.go(-1);
			}
		});
	
	
		
	});
	
</script>

师远鹏

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端 jquery 长按触发移动事件 <升级版>

长按触发移动事件，可以用于手机界面上返回导航图标等等将代码拷贝到本地，进行测试在手机端测试，或者通过谷歌浏览器F12 测试增加了对长按时间的判断，区分单击事件和长按事件测试触摸事件 #mydiv { position:fixed; left:10px; top:10p
复制链接

扫一扫