javascript獲取當前鼠標坐標的方法

2024-05-06 16:14:07

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript獲取當前鼠標坐標的方法,可針對不同瀏覽器獲取鼠標的坐標位置,是非常實用技巧,需要的朋友可以參考下

本文實例講述了javascript獲取當前鼠標坐標的方法。分享給大家供大家參考。具體實現方法如下：

對于javascript獲取當前鼠標坐標來說，得對不同瀏覽器的坐標位置有所了解。具體代碼如下：

復制代碼代碼如下:

		<html>
		<head>
		<title>javascript獲取當前鼠標坐標</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script type="text/javascript">
		 function mousePosition(ev){
		  if(ev.pageX || ev.pageY){//firefox、chrome等瀏覽器
		   return {x:ev.pageX,y:ev.pageY};
		  }
		  return {// IE瀏覽器
		   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		   y:ev.clientY + document.body.scrollTop - document.body.clientTop
		  };
		 }
		 function mouseMove(ev){
		  ev = ev || window.event;
		  var mousePos = mousePosition(ev);
		  document.getElementById('x').innerHTML = mousePos.x;
		  document.getElementById('y').innerHTML = mousePos.y;
		 }
		 document.onmousemove = mouseMove;
		</script>
		<style type="text/css">
		h3{color:blue;}
		p{line-height:30px;height:30px;font-size:14px;width:500px;}
		span{color:orange;font-weight:bold;}
		</style>
		</head>
		<body>
		 <h3>您的鼠標已經被跟蹤</h3>
		 <p> X 軸坐標：<span id="x"></span></p>
		 <p> Y 軸坐標：<span id="y"></span></p>
		</body>
		</html>