美文网首页
移动端指纹识别(长按事件)

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

作者: Maxine708 | 来源:发表于2017-03-22 19:37 被阅读0次

移动端有些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;
    }
})

相关文章

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

    移动端有些H5项目上有模拟指纹识别的效果,其实也就是长按事件。核心就是判断触摸的长短,以及阻止页面的默认长按事件。...

  • 移动端------移动事件对

    在移动端,用户每时每刻都在触发移动事件,比如触摸的事件,点击,长按,左右滑动的事件,手指缩放,等等。都是移动事件的...

  • 移动端

    原生事件 因为click有300ms的延迟(用于判断是否长按),所以不建议在移动端使用click。移动端事件,主要...

  • 移动端H5模拟长按行为

    需求: 点击编辑, 长按删除 环境: 移动端H5 思路: 使用touchstart事件 +touchend事件 +...

  • 模拟移动端长按事件

    代码 调用:

  • vue移动端长按事件

    代码

  • Vue移动端长按事件

    页面布局如下: 说明:因为这里是长按一张指纹图片,移动端长按图片会提示“保存图片”,虽然不影响跳转,但是会误导用户...

  • Js实现移动端长按事件

    前言 最近在做一个移动端的项目,其中有一个收藏列表,其中包含几个事件。1.点击跳转详情页。2.长按显示遮罩层和删除...

  • 关于移动端的长按事件

    1.关于长按这个操作,我们需要借助三个事件: onTouchStart:开始 touch 页面的某个DOM元素; ...

  • 移动端阻止默认事件

    在移动端进行开发时,移动端存在一些默认事件,比如长按选中文字,或者下拉时刷新。这些功能我们通常都是自己去实现,为了...

网友评论

      本文标题:移动端指纹识别(长按事件)

      本文链接:https://www.haomeiwen.com/subject/kuvxgttx.html