Feb 22, 2009

获取鼠标位置

获取鼠标位置,就是获取event对象的坐标属性,先看看如何获取event对象。在W3C的模型中,把参数传递的第一个参数当作当前的event对象,在MSIE的模型中,总是window.event。

function myfunc(e) {
  var e = e || window.event;//如果e不存在,则获取window.event
}

event对象的坐标属性pageX, pageY分别是当前鼠标相对body的X, Y的坐标值,但是在IE中没有pageX和pageY,不过可以通过clientX, clientY加上scrollTop, scrollLeft的值来确定当前鼠标的位置。clientX, clientY是当前鼠标相对window的坐标值。代码:

function mouseCoords(e){
 if(e.pageX || e.pageY){//标准浏览器返回当前鼠标坐标值
  return {x:e.pageX, y:e.pageY};
 }
 else if(e.clientX || e.clientY) {//仅IE返回回当前鼠标坐标值
  return {
   x:(e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft),
   y:(e.clientY + document.documentElement.scrollTop  + document.body.scrollTop)
  }
 }
}
function mouseMove(e){
 e = e || window.event;
 var mousePos = mouseCoords(e);//这里mousePos.x, mousePos.y分别为鼠标的X, Y坐标值
}

以上代码中发现一个兼容性问题,如果文档声明为XHTML,document.body.scrollTop的值始终为0,所以在XHTML文档声明的时候,只能用document.documentElement.scrollTop。

No comments:

Post a Comment