一个简单的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;
}
});