长按事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport"
content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>长按事件</title>
<script src="http://www.aniu.tv/Public/Common/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div style="width:100%;">
<div class="touchArea" style="line-height:200px; height:200px; background-color:#CCC; text-align:center;">长按我</div>
</div>
<div class="obg" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);display:none;">
<div style="width:50%;margin:100px auto;height:200px;background:#fff;">
<span class="close" style="color:#bf0000;font-size:20px;float:right;">×</span>
<p style="text-align:center;line-height:200px;">长按屏幕我会出现</p>
</div>
</div>
<script>
var timeOutEvent = 0;
$(function(){
$(".touchArea").on({
touchstart: function(e){
timeOutEvent = setTimeout("longPress()",800);
e.preventDefault();
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function(){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0){
alert("你这是点击");
}
return false;
}
});
});
function longPress() {
//长按事件触发执行事件
timeOutEvent = 0;
alert("长按事件触发");
$(".obg").show();
}
//获取窗体的高度
var Height = $(window).height();
$(".obg").height(Height);
$(".close").click(function (){
$(".obg").hide();
});
</script>
</body>
</html>
