让 Firefox 支持 offsetX、offsetY

前不久做了一个效果,需求是鼠标划上显示大图,并跟随鼠标移动,效果很简单,利用 offsetX/Y 分别判断出鼠标指针位置相对于触发事件的对象的 X 坐标和 Y 坐标,但坑爹的是 firefox 不支持这个方法,这一下就蛋疼了… 在网上看了很多兼容的方法,感觉最可靠的方法是利用【当前鼠标指针到文档的距离】减去【当前触发事件的对象到文档的距离】等于【当前鼠标指针到第一个定位的父元素的坐标】,很绕口是吧,我画了张图,看着能清楚些:

firefox_offsetX_test

要获取【当前鼠标指针到文档的距离】,我们需要 window.pageYOffset(Netscape属性,指的是滚动条顶部到网页顶部的距离)加上 clientY(当前鼠标指针相对于当前窗口的垂直坐标)。

而要获取【当前触发事件的对象到文档的距离】,我们需要从当前触发元素到根节点为止,各级 offsetParent 元素下面有解释)的 offsetLeftoffsetTop 值之和。

offsetParent:获得被定位的最近的父级对象,定位的要求是设置了 position 属性。

如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位的父级元素,如没有已定位的父级元素,则返回 body 对象。

如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 td 和 table 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 body 对象。

麻烦的地方主要就是这两块,下面我把 js 的代码贴出来,准备好的 dome 在最后:)

Javascript:

$(function(){  $(".list-value li").mouseenter(function(){var testDiv = "<div class='test'></div>";$(this).append(testDiv);
  });  $(".list-value li").mouseleave(function(){$("div.test").remove();
  });  $(".list-value li").mousemove(function(event){var coord = coordinate(event),offsetCoord_X = coord.coord_X + 10,offsetCoord_Y = coord.coord_Y + 10,text = "X:" + coord.coord_X + ", Y:" + coord.coord_Y;$("div.test").html(text);$("div.test").css({"left" : offsetCoord_X + "px" ,"top" : offsetCoord_Y + "px"});
  });

});// 计算光标相对于第一个定位的父元素的坐标function coordinate(e){  var e = window.event || e,      coord,      coord_X,      coord_Y;  coord_X = (e.offsetX == undefined) ? getOffset(e).X : e.offsetX;  coord_Y = (e.offsetY == undefined) ? getOffset(e).Y : e.offsetY;  coord = { "coord_X" : coord_X , "coord_Y" : coord_Y };  return coord;
}// 针对火狐不支持offsetX/Yfunction getOffset(e){  var target = e.target, // 当前触发的目标对象  eventCoord,      pageCoord,      offsetCoord;  // 计算当前触发元素到文档的距离
  pageCoord = getPageCoord(target);  // 计算光标到文档的距离
  eventCoord = {X : window.pageXOffset + e.clientX,Y : window.pageYOffset + e.clientY
  };  // 相减获取光标到第一个定位的父元素的坐标
  offsetCoord = {X : eventCoord.X - pageCoord.X,Y : eventCoord.Y - pageCoord.Y
  };  return offsetCoord;
}function getPageCoord(element){  var coord = { X : 0, Y : 0 };  // 计算从当前触发元素到根节点为止,
  // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和
  while (element){coord.X += element.offsetLeft;coord.Y += element.offsetTop;element = element.offsetParent;
  }  return coord;
}

 



评论

*
*