移动端的操作一直以简单为宗旨,那么就涉及到需要为一个元素同时增加点击与长按事件,代码如下:
//首先需要禁止页面上的默认长按事件
document.body.onselectstart=document.body.oncontextmenu=function(){return false;};
//长按初值
var longClick = 0;
//短按初值
var shortClick = 0;
//时间初值
var timeout = 0;
$('.demo').each(function(){
var $this = $(this);
//监听按下屏幕事件
$this.on('touchstart', function(){
longClick = 0;
shortClick = 1;
timeout = setTimeout(function() {
longClick = 1;
shortClick = 0;
//==触发成功时如何表现,这里可以写一些代码==//
}, 300);
});
//长按移动事件排除
$this.on('touchmove', function(){
clearTimeout(timeout);
//==针对触发成功时如何恢复,这里可以写一些代码==//
timeout = 0;
e.preventDefault();
});
//监听离开屏幕事件
$this.on('touchend', function(){
clearTimeout(timeout);
if(timeout != 0 && shortClick == 1 && longClick != 1)
{
//==业务代码==//
}else if(timeout != 0 && longClick == 1 && shortClick != 1 ){
document.body.onselectstart=document.body.oncontextmenu=function(){};
//==业务代码==//
}
return false;
});
});