js_获取鼠标的位置.docVIP

js?获取鼠标的位置 (2009-12-14 10:51:39) HYPERLINK javascript:; 转载 用?javascript?获取当页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip）?等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同，本文详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。 HYPERLINK /pub/html/javascript/tip/mouse_position/mouse_position.php \t _blank 查看示例Javascript: ? 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 }; } ? /script 使用方式：Code: document.onmousemove?=?mouseMove;function?mouseMove(ev){????ev?=?ev?||?window.event;????var?mousePos?=?mousePosition(ev);} 关于代码的详细说明，原文中已经介绍，现转到此处：我们首先要声明一个??evnet?对象，无论移动、点击、按键等，都会激活一个?evnet?，在?Internet?Explorer?里，??event?是全局变量，会被存储在?window.event?里．?在?firefox?或者其他浏览器，event?会被相应的函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove?会获取鼠标移动事件。为了让?ev?在所有浏览器下获取了?event?事件，在Firefox下||window.event将不起作用，因为ev已经有了赋值。在?MSIE?中?ev?为空，所以得到?window.event?。因为在这篇文章中我们需要多次获取鼠标位置，所以我们设计了一个?mousePosition?函数，它包含一个参数?：?event?。因为我们要在?MSIE?和其他浏览器下运行，Firefox?和其他浏览器用?event.pageX?和?event.pageY?来表示鼠标相对于文档的位置，如果你有一个?500*500?的窗口并且你的鼠标在绝对中间，那么?pageX?和?pageY??的值都是?250，如果你向下滚动??500，?那么?pageY?将变成?750。MSIE?正好相反，它使用?event.clientX?和?event.clientY?表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY?依然是?250，因此，我们需要添加?scrollLeft?和?scrollTop?这两个相对于文档的属性。最后，MSIE?中文档并不是从?0，0?开始，而是通常有一个小的边框（通常是?2?象素），边框的大小定义在??document.body.clientLeft?和?clientTop?中，我们也把这些加进去。完成代码：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??? ??? ?};}document.onmousemove = mouseMove;function mous