JS 长按移动端

最新推荐文章于 2024-03-19 21:16:55 发布

dashan_1200

最新推荐文章于 2024-03-19 21:16:55 发布

阅读量119

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/humi/p/8275558.html

版权

实质上，长按的时间不应该过长，因为这有可能与手机系统的部分长按手势产生冲突，但也不宜过短，因为长按时间过短与点击没有任何区别，
理论上，判断长按结束，在手机端上仅设置mouseup动作就可以，

<!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>

手机端js模拟长按事件（代码仿照jQuery）
代码编写：

$.fn.longPress = function(fn) {
    var timeout = undefined;
    var $this = this;
    for(var i = 0;i<$this.length;i++){
        $this[i].addEventListener('touchstart', function(event) {
            timeout = setTimeout(fn, 800);
            }, false);
        $this[i].addEventListener('touchend', function(event) {
            clearTimeout(timeout);
            }, false);
    }
}

代码使用：

$(select).longPress(function(){
    alert(1);
});

转载于:https://www.cnblogs.com/humi/p/8275558.html

dashan_1200

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 长按移动端

实质上，长按的时间不应该过长，因为这有可能与手机系统的部分长按手势产生冲突，但也不宜过短，因为长按时间过短与点击没有任何区别，理论上，判断长按结束，在手机端上仅设置mouseup动作就可以，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD...
复制链接

扫一扫

JS 长按 移动端

JS 长按移动端