JavaScript：使用键盘/鼠标来移动标签

最新推荐文章于 2023-11-30 16:20:58 发布

旧梦夜雨丶

最新推荐文章于 2023-11-30 16:20:58 发布

阅读量445

点赞数

文章标签： html javascript 前端 css

本文链接：https://blog.csdn.net/SE_LIN/article/details/129252753

版权

这篇文章介绍了使用键盘和鼠标来操作html中某个标签的位置的方法。

HTML

html里创建div id=ball，再写css给它改成小球的模样。非常简易的界面。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#ball{
			background-color: aliceblue;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			position: absolute;
			left: 50%;
		}
	</style>
</head>
<body>
<div id="ball"></div>
<script src="js/moveDiv.js"></script>
</body>
</html>

JS

对于鼠标操作，我们要使用onmousedown/move/up属性，对应鼠标点下、移动、松开，给这些属性绑定方法，在里面实现跟随鼠标指针移动。

首先给down绑定函数，参数是event内置对象，先在鼠标点击时计算点击的坐标距离小球边界坐标的edgex,edgey，然后再给move绑定函数，用移动后的鼠标坐标再与edgex,edgey运算，就得到了实际上要移动的距离，再访问style的left、top属性改变标签的位置，最后给up绑定函数，在里面将move的事件绑定取消掉。这样，一套响应事件的流程就走了一遍。

注意外层代码块里面的event.clientX和里面的event.clientX不是一个值，读取的时间不同，一个是鼠标点击时读取的，另一个是鼠标移动后读取的。

var ball = document.getElementById("ball");

ball.onmouseover = () => document.body.style.cursor = "pointer";

ball.onmousedown = (event) => {
	//clicking coordinate to left/top edge
	var edgex = event.clientX - ball.offsetLeft;
	var edgey = event.clientY - ball.offsetTop;
	ball.onmousemove = (event) => {
		//moved coordinate
		var cx = event.clientX - edgex;
		var cy = event.clientY - edgey;

		ball.style.left = cx + "px";
		ball.style.top = cy + "px";
	}
	ball.onmouseup = () => {
		ball.onmousemove = null;
	}
}

对于键盘操作，要使用onkeydown属性。这个逻辑较上面鼠标的那个简单一些，其中switch里的数字是键盘按键键码值（37~40：←↑→↓），可以在网上查到对应的表。

document.onkeydown = (event)=>{
	//displacement per press
	const D = 5;
	let left = ball.offsetLeft;
	let top = ball.offsetTop;
	switch(event.keyCode){
		case 37:ball.style.left = left - D +"px";break;
		case 38:ball.style.top = top - D +"px";break;
		case 39:ball.style.left = left + D +"px";break;
		case 40:ball.style.top = top + D +"px";break;
	}
}