js中的事件对象event （获取元素的,x,y坐标）

最新推荐文章于 2024-07-30 17:53:50 发布

家里有蜘蛛

最新推荐文章于 2024-07-30 17:53:50 发布

阅读量8.3k

点赞数 1

分类专栏： # 原生js

本文链接：https://blog.csdn.net/qq_44983621/article/details/90475806

版权

原生js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

event的使用获取元素的,x,y坐标

如图所示
在这里插入图片描述
当鼠标放在上面那个框上时获取其坐标，并且在下面框中显示
其实需要使用到鼠标移动事件 onmousemove
event 事件对象中封装了当前事项相关的一切属性如鼠标的坐标键盘的按键

<script type="text/javascript">
			window.onload = function(){
				var big = document.getElementById("big");
				var small = document.getElementById("small");
				big.onmousemove = function(event){
					var x = event.clientX;
					var y = event.clientY;
					small.innerHTML = "x = " + x +", y = " + y;
				}
			}
		</script>

这种方法在ie8及一下无法使用
原因是在ie8中不支持event的使用

<script type="text/javascript">
			window.onload = function(){
				var big = document.getElementById("big");
				var small = document.getElementById("small");
				big.onmousemove = function(event){
					event = event || window.event;
					var x = event.clientX;
					var y = event.clientY;
					small.innerHTML = "x = " + x +", y = " + y;
				}
			}
		</script>

这样就兼容各种主流浏览器了

下面是整体代码预览图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#big{
				width: 400px;
				height: 80px;
				border: 2px solid black;
			}
			#small{
				margin-top: 20px;
				width: 400px;
				height: 30px;
				border: 2px solid black;
			}
		</style>
		<!-- 事件对象中封装了当前事项相关的一切属性如鼠标的坐标键盘的按键 -->
		<script type="text/javascript">
			window.onload = function(){
				var big = document.getElementById("big");
				var small = document.getElementById("small");
				big.onmousemove = function(event){
					event = event || window.event;
					var x = event.clientX;
					var y = event.clientY;
					small.innerHTML = "x = " + x +", y = " + y;
				}
			}
		</script>
	</head>
	<body>
		<div id="big"></div>
		<div id="small"></div>
	</body>
</html>