移动端的长按事件

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

weixin_34337265

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

阅读量442

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/ming0929/blog/1596219

版权

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="width:100%;">
    <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div> 
</div>
<script>
var timeOutEvent=0;
$(function(){
	$("#touchArea").on({
		touchstart: function(e){
			timeOutEvent = setTimeout("longPress()",500);
		 	e.preventDefault();
		},
		touchmove: function(){
            		clearTimeout(timeOutEvent); 
		    	timeOutEvent = 0; 
		},
		touchend: function(){
	   		clearTimeout(timeOutEvent);
			if(timeOutEvent!=0){ 
			    alert("你这是点击，不是长按"); 
			} 
			return false; 
		}
	})
});

 
function longPress(){ 
    timeOutEvent = 0; 
    alert("长按事件触发发"); 
} 

</script>
</body>
</html>

效果

1. 点击
2. 长按

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

</head>

<body>
<div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div>
</body>
</html>

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

$("#mydiv").mousedown(function() {
    timeout = setTimeout(function() {
        $("#mydiv").text("in");
    }, 2000);
});

$("#mydiv").mouseup(function() {
    clearTimeout(timeout);
    $("#mydiv").text("out");
});

$("#mydiv").mouseout(function() {
    clearTimeout(timeout);
    $("#mydiv").text("out");
});

</script>