移動(dòng)端有些H5項(xiàng)目上有模擬指紋識別的效果傲茄,其實(shí)也就是長按事件。
核心就是判斷觸摸的長短沮榜,以及阻止頁面的默認(rèn)長按事件盘榨。
移動(dòng)端用的庫是Zepto.js。
$.fn.longPress = function(fn) {
var timeout = undefined;
var $this = this;
for(var i = 0;i<$this.length;i++){
$this[i].addEventListener('touchstart', function(event) {
event.preventDefault()
timeout = setTimeout(fn, 800); //長按時(shí)間超過800ms蟆融,則執(zhí)行傳入的方法
}, false);
$this[i].addEventListener('touchend', function(event) {
event.preventDefault()
clearTimeout(timeout); //長按時(shí)間少于800ms草巡,不會執(zhí)行傳入的方法
}, false);
}
}
后面就調(diào)用longPress()即可。
jquery 長按
var longClick =0;
$(".pic").on({
touchstart: function(e){
longClick=0;//設(shè)置初始為0
timeOutEvent = setTimeout(function(){
//此處為長按事件-----在此顯示遮罩層及刪除按鈕
longClick=1;//假如長按型酥,則設(shè)置為1
},800);
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
e.preventDefault();
},
touchend: function(e){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0 && longClick==0){//點(diǎn)擊
//此處為點(diǎn)擊事件----在此處添加跳轉(zhuǎn)詳情頁
// alert("這是點(diǎn)擊")
}
return false;
}
})