页面中使用JQuery实现长按事件
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<metaname="MobileOptimized"content="320">
<title></title>
</head>
<styletype="text/css">
.box{
width:100%;
height:200px;
border:1pxsolid#ccc;
text-align:center;
font-size:30px;
color:#000;
}
</style>
<body>
<divclass="box">
<p>点击/长按</p>
<p>操作：<spanclass="res"></span></p>
</div>
</body>
<scriptsrc="https://www.php.cn/static/js/jquery-1.8.3.min.js?1.8.3"></script>
<scripttype="text/javascript">
$(".box").on({
touchstart:function(e){
varoSpan=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("你点击了")
}
returnfalse;
}
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
相关推荐
© 2020 asciim码
人生就是一场修行