鼠标对象事件

最新推荐文章于 2024-08-06 12:58:11 发布

优价实习

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量107

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_44828588/article/details/113894047

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style  type="text/css">
		#areadiv{
			width: 200px;
			height: 60px;
			
			background-color:#FF0000 ;
			border: 4px antiquewhite;
			
		}
		#shouMeasage{
			width: 200px;
			height: 30px;
			border: 2px;
			background-color: greenyellow;
			margin-top: 20px;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
		//事件对象
		var areaDiv=document.getElementById("areadiv");
		var showmasg=document.getElementById("shouMeasage");
		//onmousemove鼠标移动时触发函数
		/*事件对象
		 * 当事件响应函数被触发，浏览器每次将一个事件作为实参传递响应函数
		 * 事件对象中有封装了事件对象一切信息，如点击等 滚轮滚动的方向
		 * IE8及以下，不会传递对象作为参数，而是直接作为全局的属性，即window
		 * 
		 * 
		 */
		areaDiv.onmousemove=function(event){
			//在onshowmasg中显示鼠标坐标
			//alert("dsd")
			/*
			 * clientX:获取鼠标当前X坐标
			 * clientY:获取鼠标当前Y坐标
			 */
			//IE8及以下
			if(!event){
				event=window.event
			}
			//或者
			event=event||window.event
			var x=event.clientX;
			var y=event.clientY;
			showmasg.innerHTML="x="+x+"y="+y

		};
		}
		
	</script>
	<body>
		<div id="areadiv">
			
		</div>
		<div id="shouMeasage">
			
		</div>
		
	</body>
</html>

在这里插入图片描述

优价实习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
鼠标对象事件

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> #areadiv{ width: 200px; height: 60px; background-color:#FF0000 ; border: 4px an
复制链接

扫一扫