jquery中H5页面长按事件(代码全)简单小demo

一个简单的demo，先上图看效果（当长按0.5秒的时候就会显示下面的红色div）

如果是单击一次鼠标并没有到0.5秒则提示

下面上全部代码

注意：是H5页面才会触发，用谷歌调试的时候要按F12进入手机的模式，否则不起作用（@炬）

<!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 class="names" style="width:50%; height:100px; background-color:red;font-size:50px;display:none">长按显示</div>

</div>
<script>
var timeOutEvent=0;
$(function(){
	$("#touchArea").on({
		touchstart: function(e){
			timeOutEvent = setTimeout("longPress()",500);//500设置时间
		 	e.preventDefault();
		},
		touchmove: function(){
            		clearTimeout(timeOutEvent); 
		    	timeOutEvent = 0; 
		},
		touchend: function(){
	   		clearTimeout(timeOutEvent);
			if(timeOutEvent!=0){ 
			    alert("你这是点击，不是长按"); 
			} 
			return false; 
		}
	})
});
 
 
function longPress(){ 
    timeOutEvent = 0; 
    alert("长按事件触发发");
    $(".names").show()

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

如果不行，还有另一种方法大同小异代码下

var longClick =0;
$("#equipment-information .equipment_information").on({
    touchstart: function(e){
        longClick=0;//设置初始为0
        timeOutEvent = setTimeout(function(){
            //此处为长按事件-----在此显示遮罩层及删除按钮
            longClick=1;//假如长按，则设置为1
            alert("这是长按删除")
        },1000);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==0){//点击
            //此处为点击事件----在此处添加跳转详情页
            alert("这是点击")
        }
        return false;
    }
});

jquery中H5页面长按事件(代码全)简单小demo

猜你喜欢