JavaScript获取鼠标坐标与事件源对象的跨浏览器兼容实现

JavaScript获取鼠标坐标的实现

本文介绍如何使用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 mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
} 

关于上述代码的详细原理说明如下：

首先需要声明一个event对象。无论是鼠标移动、点击还是按键操作，都会激活一个event事件。在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定义，计算时需将这些值加入。

幸运的是，通过mousePosition函数我们已经解决了坐标计算问题，无需再为此费心。

获取触发事件的目标对象

接下来介绍如何使用JavaScript获取触发事件的目标对象。

 
<script language = "javascript" >
document.onclick = onClick;
function onClick(ev)
{ 
ev = ev || window.event; // 获取事件对象
var target = ev.target || ev.srcElement; // 获取事件源元素
/* target.getAttribute()用于获取该事件源对象的一些属性。
例如对象中包含name、id、type等属性；*/
var dragObj = target.getAttribute('id');
alert(dragObj);
} 
</ script >

关键点在于event对象在多浏览器下的兼容性处理，其原理与上述获取坐标的方式一致，此处不再赘述代码细节。