移动端指纹识别(长按事件)

2017-03-22  本文已影响0人  Maxine708

移动端有些H5项目上有模拟指纹识别的效果,其实也就是长按事件。
核心就是判断触摸的长短,以及阻止页面的默认长按事件。
移动端用的库是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);  //长按时间超过800ms,则执行传入的方法
            }, false);
        $this[i].addEventListener('touchend', function(event) {
            event.preventDefault()
            clearTimeout(timeout);  //长按时间少于800ms,不会执行传入的方法
            }, false);
    }
}

后面就调用longPress()即可。

jquery 长按

var longClick =0;
$(".pic").on({
    touchstart: function(e){
        longClick=0;//设置初始为0
        timeOutEvent = setTimeout(function(){
            //此处为长按事件-----在此显示遮罩层及删除按钮
            longClick=1;//假如长按,则设置为1
          
        },800);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==0){//点击
            //此处为点击事件----在此处添加跳转详情页
            // alert("这是点击")
        }
        return false;
    }
})
上一篇 下一篇

猜你喜欢

热点阅读