javascript(21)鼠标移动事件

最新推荐文章于 2024-04-16 19:44:59 发布

冲啊Javascripit

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量856

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/weixin_43752554/article/details/105600198

版权

javascipt 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

鼠标移动对象：
onmousemove

事件对象：
在事件的响应函数被触发时，浏览器每一次都会将该事件对象作为实参传入响应函数
该事件对象包含了一切当前事件相关的一切信息，比如：鼠标的坐标，键盘上那个键被按下，鼠标滚轮滚动的方向

在IE8以及以下的浏览器中，响应函数被触发时，不会传递函数对象，而是将事件对象作为window对象的属性保存的（event）

练习：
1.显示鼠标在方块中的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			#box{
				width:100px;
				height:100px;
				background-color: bisque;
			}
			#show{
				margin-top:20px; 
				width:100px;
				height:20px;
				border:solid 1px darkcyan;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var box=document.getElementById("box");
				var show=document.getElementById("show");
				var Y;
				var X;
				//查看整个页面中的clientX，clientY
				//在IE8以及以下，通过event来查看(window的属性)
				box.οnmοusemοve=function(event){
					//考虑兼容性，如果event不存在，
					//就将event.window赋值给event
					event=event||window.event;
					Y=event.clientY;
					X=event.clientX;
					show.innerHTML="X="+X+"         Y="+Y;
				};
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
		<div id="show"></div>
	</body>
</html>

2.拖动div小方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
				width:1000px;
				width:1000px;
			}
			#box{
				width:100px;
				height:100px;
				background-color: royalblue;
				/*开启绝对定位,使方块可以移动*/
				position:absolute;
			}
			#show{
				margin-top:120px;
				width:100px;
				height:30px;
				border: solid 2px bisque;
			}
		</style>
		<script>
			window.onload=function(){
				var box=document.getElementById("box");
				var Y;
				var X;
				//修正方块的位置,让鼠标在方块的中心
				var top=box.offsetHeight/2;
				var left=box.offsetWidth/2;
				//在鼠标进入box的时候触发移动鼠标事件
				box.onmousemove=function(){
					//这样，即使鼠标脱离了box，也可以让鼠标进行移动
					document.onmousemove=function(event){
						event=event||window.event;
						//获取鼠标的位置
						Y=event.clientY;
						X=event.clientX;
						//当页面有滚动条的时候，获取鼠标位置就变了.在滚动条下面的时候，方块就不会再向下移动了
						//原因：用clientY，X的时候他们有最大值，就是当前显示页面的高宽
						//通过scroll来修正水平，垂直偏移量
						//Chrome中偏移量通过document.body获得，而Firefox通过document.documentElement来获取
						/*var scrollY=document.documentElement.scrollTop;
						var scrollX=document.documentElement.scrollLeft;*/
						var scrollY=document.body.scrollTop;
						var scrollX=document.body.scrollLeft;
						show.innerHTML="X="+scrollX+"         Y="+scrollY;
						//设置方块的位置
						//一般设置width都是以px为单位，得到的x，y是数字，加上px
						box.style.top=Y-top+scrollY+"px";
						box.style.left=X-left+scrollX+"px";
					
					};
					
				};
			};
			
		</script>
	</head>
	<body>
		<div id="box"></div>
		<div id="show"></div>
	</body>
</html>

也可以用pageY,pageX来获取当前鼠标的位置，但是IE8以及以下浏览器不支持
通过event来使用pageY，pageX（很好用的）

冲啊Javascripit

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript(21)鼠标移动事件

鼠标移动对象：onmousemove事件对象：    在事件的响应函数被触发时，浏览器每一次都会将该事件对象作为实参传入响应函数    该事件对象包含了一切当前事件相关的一切信息，比如：鼠标的坐标，键盘上那个键被按下，鼠标滚轮滚动的方向      &...
复制链接

扫一扫