要求效果:
1.点击跳转详情页。
2.长按显示遮罩层和删除按钮
添加长按事件
$(".product").on({
touchstart: function(e){
timeOutEvent = setTimeout(function(){
//此处为长按事件-----在此显示遮罩层及删除按钮
},500);
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
e.preventDefault();
},
touchend: function(e){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0){//点击
//此处为点击事件----在此处添加跳转详情页
}
return false;
}
});
首先我对列表添加了长按事件,添加完之后,发现我的长按事件已经可以成功执行了。但是却出现了问题:
无论是点击或者长按,松开之后,都会执行touchend里面的方法,也就是长按或者点击 都会跳转详情页。
解决方法:添加一个变量,来判断是否为长按事件
var longClick =0;
$(".product").on({
touchstart: function(e){
longClick=0;//设置初始为0
timeOutEvent = setTimeout(function(){
//此处为长按事件-----在此显示遮罩层及删除按钮
longClick=1;//假如长按,则设置为1
},500);
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
e.preventDefault();
},
touchend: function(e){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0 && longClick==0){//点击
//此处为点击事件----在此处添加跳转详情页
}
return false;
}
});