jQuery移动端长按事件


var timeOutEvent = 0;
$("#target").on({  
        touchstart: function(e) { 
            // 长按事件触发  
            timeOutEvent = setTimeout(function() {  
                timeOutEvent = 0;  
                alert('你长按了');  
            }, 400);  
            //长按400毫秒   
            // e.preventDefault();    
        },  
        touchmove: function() {  
            clearTimeout(timeOutEvent);  
            timeOutEvent = 0;  
        },  
        touchend: function() {  
            clearTimeout(timeOutEvent);  
            if (timeOutEvent != 0) {  
                // 点击事件  
                // location.href = '/a/live-rooms.html';  
                alert('你点击了');  
            }  
            return false;  
        }  
    })
JS 内容:

var timeOutEvent = 0;
$(function() {
    $(".touchArea").on({
        touchstart: function(e) {
            timeOutEvent = setTimeout("longPress()", 800);
            e.preventDefault();
        },
        touchmove: function() {
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
        },
        touchend: function() {
            clearTimeout(timeOutEvent);
            if (timeOutEvent != 0) {
                alert("你这是点击");
            }
            return false;
        }
    });
});

function longPress() {

    //长按事件触发执行事件 
    timeOutEvent = 0;
    alert("长按事件触发");
    $(".obg").show();
}
//获取窗体的高度
var Height = $(window).height();
$(".obg").height(Height);
$(".close").click(function() {
    $(".obg").hide();
});


HTML 内容:

<div style="width:100%;">
		    <div class="touchArea" style="line-height:200px; height:200px; background-color:#CCC; text-align:center;">长按我</div>
		</div>
		<div class="obg" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);display:none;">
		    <div style="width:50%;margin:100px auto;height:200px;background:#fff;">
		        <span class="close" style="color:#bf0000;font-size:20px;float:right;">×</span>
		        <p style="text-align:center;line-height:200px;">长按屏幕我会出现</p>
		    </div>
		</div>

留下评论