让 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 对象。

继续阅读 让 Firefox 支持 offsetX、offsetY