每个人都是天才,你的时间应该做更多改变世界的事。
当前位置:首页 > PHP技术

移动端长按事件实现脚本

时间:2018-10-24 14:39:56 来源:笨鸟先飞 作者:NLDY 点击:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>1</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" class="product" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div> 
</div>
<script>
var self = this;
var longClick =0;
$(".product").on({
    touchstart: function(e){
        longClick=0;//设置初始为0
        timeOutEvent = setTimeout(function(){
            //此处为长按事件-----在此显示遮罩层及删除按钮
            alert(111);
            longClick=1;//假如长按,则设置为1
        },500);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==0){//点击
        	alert(1);
            //此处为点击事件----在此处添加跳转详情页
        }
        return false;
    }
});

</script>
</body>
</html>
 
Copyright ©2018 笨鸟先飞苏ICP备14008820号-1

站长QQ:58055648,交流QQ群:3147325