获取鼠标坐标

最新推荐文章于 2023-11-01 18:05:13 发布

xinking520

最新推荐文章于 2023-11-01 18:05:13 发布

阅读量265

点赞数

分类专栏： javascript 文章标签： IE XP Firefox JavaScript 浏览器 ViewUI

本文链接：https://blog.csdn.net/xinking520/article/details/83357315

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需要获取鼠标的坐标．只需要将用户函数绑定到document.onmousemove就可以了，同时要考虑的ie与firefox等浏览器的区别。

首先，绑定

document.οnmοusemοve=mouseMove;

其次，制作自定义用户函数mouseMove(ev)

function mouseMove(event){
      ev= event|| window.event;//所有浏览器下获取了event事件
      var mouseXY = mousePos(ev);//获取位置
}

在firefox浏览器中event事件会被相应的自定义函数获取，而在ie中，event是全局变量，会被存储在window.event里.

获取到event事件后。获取鼠标的就简单多了。

最后，获取鼠标的文档的位置

在ff中,鼠标的位置是通过event对象的pageX和pageY来获取。而ie中由于event对象的clientX 和clientY并不是鼠标的位置，而是鼠标在ie窗口的位置，所以获取坐标的位置则要考虑滚动条和窗口边框的大小，即获取鼠标在文档中的实际位置。

function mousePos(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
};
}

如此一来，就获取了鼠标的位置。

测试网页:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
legend {
	font-weight: bold;
	font-size: 12px;
	color: #666699;
	font-family: verdana, tahoma, arial;
}

fieldset {
	padding: 3px;
}
</style>
<title>层</title>

<script type="text/javascript">
	document.onmousemove = mouseMove;
	function mouseMove(ev)
	{
		ev = ev || window.event;
		var mouseXY = mousePos(ev);
		$('xp').value = mouseXY.x;
		$('yp').value = mouseXY.y;
	}

	function mousePos(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 $(id)
	{
		return document.getElementById(id);
	}
</script>
</head>
<body>
<fieldset id="Demo2"><legend>示例 - 移动你的鼠标</legend> 鼠标x坐标: <input type="text" id="xp" /> &nbsp; 鼠标y坐标: <input
	id="yp"></fieldset>
</body>
</html>

成功。

参考：

http://www.webreference.com/programming/javascript/mk/column2/index.html

http://hi.baidu.com/liwanli377/blog/item/d60ef40ac785163db1351d95.html

xinking520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标坐标

需要获取鼠标的坐标．只需要将用户函数绑定到document.onmousemove就可以了，同时要考虑的ie与firefox等浏览器的区别。首先，绑定document.onmousemove=mouseMove; 其次，制作自定义用户函数mouseMove(ev)function mouseMove(event){ ev= event|| window.event;//所有...
复制链接

扫一扫