js获取鼠标位置

最新推荐文章于 2024-06-15 19:18:00 发布

shenge321

最新推荐文章于 2024-06-15 19:18:00 发布

阅读量686

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/shenge321/article/details/9409631

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在IE浏览器中，有个window.event对象。有三个关于坐标的属性。

offsetX、offsetY 相对与当前层的位置

screenX、screenY 相对与屏幕的位置

clientX、clientY 相对与浏览器的位置

除了谷歌全部支持以上的三个属性，火狐只支持后两个属性，第一个属性可以用layer代替。

不过可以通过判断来选这使用不同属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{margin:0;paddig:0;}
			#dv{/*如果使用margin来布局，IE10和chrome仍能得到正确的坐标，但是火狐会把margin的值也加进来*/
				background-color:black;
				font-size:40px;
				width:400px;
				height:300px;
				font-family:微软雅黑;
				color:white;
				text-align:center;
				position:absolute;
				top:50px;
				left:50px;
			}
			#dv span{
				line-height:150px;
			}
		</style>
		<script type="text/javascript">
			οnlοad=function(){
				var dv=document.getElementById("dv");
				dv.οnmοusemοve=function(){
					var e=window.event||arguments[0];// IE和chrome支持window.event对象，e就是window.event对象。而火狐不支持该对象，不过火狐会传入一个参数，该参数类似window.event对象。需要用arguments参数列表对象来取得该对象。
					var tag=window.event?"offset":"layer";// 获取能正确显示鼠标在当前层的坐标的属性
					var x=e[tag+"X"];// 拼接属性，得到坐标。
					var y=e[tag+"Y"];
					var location=x+"."+y;
					this.innerHTML="<span>Do you Love me !<br/>"+location+"<span>";
				};
			};
		</script>
	</head>
	<body>
		<div id="dv">
			<span>Do you Love me !<span></div>
	</body>
</html>