微信长按事件

html

            <div class="content-cen">
                <div class="cup cup1 showImg1"></div>
                <div class="cup cup2 showImg2" style="display: none;">
                    <!--<img src="{:CDN2_ACT_URL}/src/activity/2018/oneMillion/images/cup2.gif?v={$v}"/>-->
                </div>
                <div id="discern" class="discern"></div>
            </div>

css

.game-page .cup {
    width:4.74rem;
    height:4.65rem;
    margin:.16rem auto .55rem;
}
.game-page .content-cen{
    -webkit-user-select:none;  
    -khtml-user-select:none;
    -moz-user-select:none; 
    -ms-user-select:none;
    user-select:none; 
    /*position: absolute;
    top:48.88%;*/
    position: relative;
}
.game-page .cup {
    background: url("../images/cup.png") repeat;
    background-size: 100% 100%;
}
.game-page .cup2 {
    background: url("../images/cup2.gif") repeat;
    background-size: 100% 100%;
}
.discern {
    width: 2.24rem;
    height: 2.24rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.12rem;
    margin-left: -1.12rem;
}

 

js

    //指纹长按
    var timeOutEvent=0;  
    $(function(){  
        $(".discern").on({  
            touchstart: function(e){
                $(".showImg1").hide(); 
                $(".showImg2").show(); 
                timeOutEvent = setTimeout("longPress()",2000);  
                e.preventDefault();  
            },  
    //      touchmove: function(){  
    //                  clearTimeout(timeOutEvent);   
    //              timeOutEvent = 0;   
    //      },  
            touchend: function(){  
                clearTimeout(timeOutEvent);  
                if(timeOutEvent!=0){   
    //              alert("你这是点击，不是长按");   
                }   
                $(".showImg2").hide(); 
                $(".showImg1").show(); 
                return false; 
            }  
        }) 

 将图片使用背景图的形式！！！

转载于:https://www.cnblogs.com/qdlhj/p/8932000.html