ASCII码 ASCII码

JQuery长按事件

发布于：2022-06-05 11:00:13  栏目：技术文档

页面中使用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码

人生就是一场修行