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

原创已于 2022-11-30 21:43:32 修改 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

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

JavaScript类专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用JavaScript为按钮实现鼠标长按时连续触发事件，并通过计数器更新按钮上的数字。通过onmousedown, onmouseup和onmouseout事件处理，确保只有在按下并保持鼠标按键时才会触发计数。

<!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>