长按事件.html

最新推荐文章于 2022-12-14 22:37:28 发布

xiaoerbuyu1233

最新推荐文章于 2022-12-14 22:37:28 发布

阅读量350

点赞数

分类专栏： web相关

本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/118378848

版权

web相关专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>长按事件</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

</head>
<style type="text/css">
	.nl-btn{padding: 8px 20px; user-select:none; border: solid thin #bfbfbf;border-radius: 2px; box-sizing: border-box; font-size: 14px; display: inline-block; cursor: pointer; color: #0b0d0c;  background-color: #fff; outline: none;}
.nl-btn:hover{background-color: #01b841; color: #fff;font-size: 14px;border-radius: 2px; border-color: #01b841;}
.nl-btn:active{background-color: #26ac5b; color: #fff;font-size: 14px;border-radius: 2px; border-color: #26ac5b;}
</style>
<body>
<button class="nl-btn">长按事件</button>
<script type="text/javascript">
	var btn=document.querySelector(".nl-btn");

	var timer=null;

	var touchstartHander=function(event){
		// event.preventDefault();
		timer=setTimeout(LongPress,500);
	}

	var touchmoveHander=function(event){
		event.preventDefault();
		clearTimeout(timer);
        timer=null;
	}

	var touchendHander=function(event){
		event.preventDefault();
		clearTimeout(timer);
        return false;
	}
	// 移动端
	<!-- btn.addEventListener("touchstart",touchstartHander,false); -->
	<!-- btn.addEventListener("touchmove",touchmoveHander,false); -->
	<!-- btn.addEventListener("touchend",touchendHander,false); -->

	/// PC端
	 btn.addEventListener("mousedown",touchstartHander,false);
	 btn.addEventListener("mousemove",touchmoveHander,false);
	 btn.addEventListener("mouseup",touchendHander,false);

    function LongPress(){
    	alert("长按被触发")
    	console.log("300S长按被触发");
	}
</script>
</body>
</html>

xiaoerbuyu1233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
长按事件.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>长按事件</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head>.
复制链接

扫一扫

专栏目录