HTML5-长按事件

最新推荐文章于 2022-10-26 15:21:43 发布

weixin_34289454

最新推荐文章于 2022-10-26 15:21:43 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hellman/p/6972831.html

本文介绍了一个使用HTML5和JavaScript实现长按事件的示例页面。通过设置timeout来区分点击与长按操作，并展示了如何利用jQuery简化事件监听器的绑定。

<!DOCTYPE html>  
<html>  
<head>   
    <meta charset="utf-8"/>  
    <title></title>  
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>  
</head>  
<body>  
<div style="width:100%;">  
    <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">长按我</div>   
</div>  
<script>  
var timeOutEvent=0;  
$(function(){  
    $("#touchArea").on({  
        touchstart: function(e){  
            timeOutEvent = setTimeout("longPress()",500);  
            e.preventDefault();  
        },  
        touchmove: function(){  
                    clearTimeout(timeOutEvent);   
                timeOutEvent = 0;   
        },  
        touchend: function(){  
            clearTimeout(timeOutEvent);  
            if(timeOutEvent!=0){   
                alert("你这是点击，不是长按");   
            }   
            return false;   
        }  
    })  
});  
  
   
function longPress(){   
    timeOutEvent = 0;   
    alert("长按事件触发发");   
}   
  
</script>  
</body>  
</html>