js--当鼠标在框中移动，显示鼠标的坐标

¡Venceremo

于 2022-10-25 10:13:37 发布

阅读量943

点赞数

分类专栏： javascript 文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127507616

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

鼠标移动的事件.onmousemove

arreaDiv.onmousemove=function(){

}

事件对象：当事件响应函数被触发时，浏览器每次都会将一个事件对象作为实参地进响应函数

在事件对象：封装了当前事件的一切信息，比如鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向

clientX:获取鼠标指针的水平坐标

clientY:获取鼠标指针的垂直坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#arreaDiv{
				width: 200px;
				height: 100px;
				border: 1px black solid;
				margin: 10px;
			}
			#showMsg{
				width: 190px;
				height: 30px;
				border: 1px black solid;
				margin: 10px;
				padding: 5px;
				
			}
		</style>
		<script>
			window.onload=function(){
				var arreaDiv=document.getElementById("arreaDiv");
				var showMsg=document.getElementById("showMsg");
				arreaDiv.onmousemove=function(a){
					//显示坐标
					var x=a.clientX-18;//margin10 body:margin:8
					var y=a.clientY-10;//
					
					showMsg.innerHTML="x:"+x+"y:"+y;
				}
			}
		</script>
	</head>
	<body>
		<div id="arreaDiv"></div>
		<div id="showMsg"></div>
	</body>
</html>

注意：在ie8中：响应函数被触发不会传递事件对象，在ie8以下包含浏览器中，事件对象作为window对象的属性

火狐

兼容上述两者：

	if(!a){
						a=a.window
					}
					var x=a.clientX-18;//margin10 body:margin:8
					var y=a.clientY-10;//

更加巧妙的： a=a||window.a 如果前面的存在返回前面的不存在返回后面的

				a=a||window.a
					var x=a.clientX-18;//margin10 body:margin:8
					var y=a.clientY-10;//
					showMsg.innerHTML="x:"+x+"y:"+y;

¡Venceremo

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js--当鼠标在框中移动，显示鼠标的坐标

注意：在ie8中：响应函数被触发不会传递事件对象，在ie8以下包含浏览器中，事件对象作为window对象的属性。更加巧妙的： a=a||window.a 如果前面的存在返回前面的不存在返回后面的。在事件对象：封装了当前事件的一切信息，比如鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。鼠标移动的事件.onmousemove。clientX:获取鼠标指针的水平坐标。clientY:获取鼠标指针的垂直坐标。事件对象：当事件响应函数被触发时，浏览器每次都会将一个事件对象。作为实参地进响应函数。
复制链接

扫一扫