在火狐浏览器中获取鼠标位置

最近项目中需要使用 js 获取鼠标位置，本以为十分简单，直接返回 clientX 和 clientY 不就完了么

结果实际开发的时候，在火狐浏览器中遇到了兼容性问题，这里就和大家分享一下

 

一、获取鼠标的位置

如果只考虑谷歌浏览器，直接获取 window.event 的 clientX 和 clientY，是最简单粗暴的办法：

function mousePosition(evt){
  evt = evt || window.event;
  return {
    x:evt.clientX,
    y:evt.clientY
  };
}

clientX 和 clientY 分别指的是鼠标相对于当前窗口的坐标，通常用于固定定位（fixed）

如果需要获取鼠标相对于当前页面的坐标，可以使用 pageX 和 pageY

 

二、生成 event 对象

但是火狐浏览器中并没有 window.event，需要手动创建一个 event 对象：

function getEvent(){
 if (document.all) return window.event;
 func = getEvent.caller;
 while (func != null){
   var arg0 = func.arguments[0];
   if (arg0) {
     if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)){
        return arg0;
     }
   }
   func = func.caller;
 }
 return null;
}

 

调用之后就能正常使用 event 对象了：

function test() {
   var event = getEvent();
   console.log('evtx:', event.clientX);
   console.log('evty:', event.clientY);
}