jquery实现长按响应事件

电脑端: 使用mousedown mouseup mouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>  
  
</head>  
  
<body>  
<div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div>  
</body>  
</html>  
  
<script>  
/*设置一个长按的计时器，如果点击这个图层超过2秒则触发，mydiv里面的文字从out变in的动作*/  
var timeout ;  
   
$("#mydiv").mousedown(function() {  
    timeout = setTimeout(function() {  
        $("#mydiv").text("in");  
    }, 2000);  
});  
   
$("#mydiv").mouseup(function() {  
    clearTimeout(timeout);  
    $("#mydiv").text("out");  
});  
  
$("#mydiv").mouseout(function() {  
    clearTimeout(timeout);  
    $("#mydiv").text("out");  
});  
  
</script>

移动端: touchstart touchend

var time = 0;//初始化起始时间  
  
  
$("#imgDiv").on('touchstart', '.previewImg', function(e){  
    e.stopPropagation();  
    var index=$("#imgDiv").find(".image").index($(this));  
    time = setTimeout(function(){  
        showCloseImg(index);  
    }, 500);//这里设置长按响应时间  
});  
  
$("#imgDiv").on('touchend', '.previewImg', function(e){  
    e.stopPropagation();  
    clearTimeout(time);    
});  
  
function showCloseImg(index){  
    var e=$("#imgDiv").find(".image").eq(index);  
    $(".deleteImg").hide();  
    e.next().show();  
}

 

posted on 2016-12-07 18:24  小乔流水人家  阅读(1429)  评论(0)    收藏  举报

导航