计算鼠标偏移量

最新推荐文章于 2021-07-01 14:31:05 发布

爱体育的IT男

最新推荐文章于 2021-07-01 14:31:05 发布

阅读量564

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_37169103/article/details/78047464

5 篇文章

订阅专栏

本文详细讲解如何在JavaScript中计算鼠标点击时相对于某个DOM元素的偏移量，包括X轴和Y轴的坐标差，这对于实现拖拽效果、悬浮框定位等交互功能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	body{
	margin: 0;
	padding: 0;
	}
	div{
	width: 300px;
	height: 300px;
	border: 1px solid #000000;
	}
	</style>
	<script>

	//判断鼠标是否按下
	var isDown = false;

	//实时监听鼠标位置
	var moveX = 0;
	var moveY = 0;

	//记录鼠标按下瞬间的位置
	var x = 0;
	var y = 0;

	//鼠标按下时移动的偏移量
	var mouseMoveX = 0;
	var mouseMoveY = 0;

	function myWheel(){
	var cont = document.getElementById("cont");
	cont.style.fontSize = "40px";
	}


	//鼠标移动事件
	function myMove(event){
	moveX = event.clientX;
	moveY = event.clientY;
	var cont = document.getElementById("cont");
	var mess2 = document.getElementById("mess2");

	cont.innerHTML = "x="+moveX+",y="+moveY;

	//计算鼠标移动偏移量
	mouseMoveX = moveX - x;
	mouseMoveY = moveY - y;

	if(isDown){
	mess2.innerHTML = "鼠标移动的偏移量为：x="+mouseMoveX+",y="+mouseMoveY;
	}


	}

	//鼠标按下事件
	function myDown(event){
	x = event.clientX;
	y = event.clientY;
	isDown = true;

	var mess = document.getElementById("mess");
	mess.innerHTML = "鼠标按下了，当前鼠标位置：x="+x+",y="+y;
	}

	//鼠标松开事件
	function myUp(){
	var mess = document.getElementById("mess");
	mess.innerHTML = "鼠标松开了";
	isDown = false;
	mouseMoveX = 0;
	mouseMoveY = 0;
	}

	</script>
	</head>
	<body>

	<div id="cont" onwheel="myWheel()" onmouseup="myUp()" onmousedown="myDown(event)" onmousemove="myMove(event)">

	</div>
	<font id="mess"></font><br>
	<font id="mess2"></font>

	</body>
	</html>