页面中使用JQuery实现长按事件
实例
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="MobileOptimized" content="320">
<title></title>
</head>
<style type="text/css">
.box{
width: 100%;
height: 200px;
border: 1px solid #ccc;
text-align: center;
font-size: 30px;
color: #000;
}
</style>
<body>
<div class="box">
<p>点击/长按</p>
<p>操作：<span class="res"></span></p>
</div>
</body>
<script src="https://www.php.cn/static/js/jquery-1.8.3.min.js?1.8.3" ></script>
<script type="text/javascript">
$(".box").on({
touchstart: function(e) {
var oSpan = e.currentTarget.lastElementChild
// 长按事件触发
timeOutEvent = setTimeout(function() {
timeOutEvent = 0;
console.log('你长按了');
$(".res").text("你长按了")
}, 500);
},
touchmove: function() {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function() {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
console.log('你点击了');
$(".res").text("你点击了")
}
return false;
}
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
