获取鼠标当前位置的js

最新推荐文章于 2024-08-14 08:01:05 发布

mush_me

最新推荐文章于 2024-08-14 08:01:05 发布

阅读量86

点赞数

分类专栏： javascript相关文章标签： javascript xhtml java ViewUI

本文链接：https://blog.csdn.net/mush_me/article/details/83978665

版权

javascript相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

获取鼠标坐标的js，来源http://www.cnblogs.com/5201314/archive/2009/05/21/1486034.html
兼容火狐，ie，chrome


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
</head>

<body>
<script type="text/javascript">
function mousePosition(ev){
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
      }
      return {
       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('xxx').value = mousePos.x;
  document.getElementById('yyy').value = mousePos.y;
}

document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
</body>
</html>

如果以上还不够，那么试试这个，需要jquery支持


<%@ page language="java"  pageEncoding="utf-8"%>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'hightlight.jsp' starting page</title>
<style type="text/css"> 
.highlight {background-color: #FFFF88; }
</style>
<script type="text/javascript"> 
    function chHere(mouseOverId){
    	var X = $("#"+mouseOverId).offset().top;
		var Y = $("#"+mouseOverId).offset().left;
		alert(X+":"+Y);
    }
</script>
</head>
<body>
	<span id="mySpan" onclick="chHere('mySpan')" style="margin-left:50px;">这里</span>

  </body>
</html>