JS 中实现鼠标长按连续触发

UserGuan

已于 2022-11-30 21:43:32 修改

阅读量1.8k

点赞数

分类专栏： JavaScript类

于 2022-07-29 16:33:34 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/126058963

版权

javascript 前端 html

JavaScript类专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<title>JS中实现鼠标长按连续触发</title>
	</head>
	<body>
		<button id="button">0</button>
		<script type="text/javascript">
			let num = 0,
				tid;
			const btn = window.document.getElementById("button");
			/* 点击事件 */
			btn.onclick = function(e) {
				triggerEvent(); // 触发事件
			};
			/* 鼠标点下时 */
			btn.onmousedown = function(e) {
				// 设置定时
				tid = setInterval(function() {
					triggerEvent(); // 触发事件
				}, 300);
			};
			/* 鼠标抬起时 */
			btn.onmouseup = function(e) {
				clearInterval(tid); // 清除计时器
			}
			/* 鼠标移开时 */
			btn.onmouseout = function(e) {
				clearInterval(tid); // 清除计时器
			}
			/* 触发事件 */
			function triggerEvent() {
				num++;
				btn.innerHTML = num;
			}
		</script>
	</body>
</html>