三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

offsetX/Y for Firefox
作者:Neoxone    发表时间: 2010年07月29号,星期四     阅读:7,412 次

我们从一个实际的功能出发开始讲:现在的相册大多有这个功能,鼠标点在照片的左边时,可以跳到上一张,而点到右边则跳到下一张。
这就需要一个坐标点的比较计算:【鼠标相对图片的位置】 vs 【图片的尺寸/2】。
后一项【图片的尺寸/2】简单,使用obj.offsetWidth/2。
前一项【鼠标相对图片的位置】似乎也简单,因为有个事件属性叫 event.offsetX。
但是很悲剧,Firefox并不支持offsetX!

既然Firefox不支持,那我们接下来要做的就是将offset计算出来,它的值应该就等于【鼠标相对窗口左边境的位置】减去【图片到窗口左边境的距离】。
前一项【鼠标相对窗口左边境的位置】即为event.clientX,而后一项【图片到窗口左边境的距离】莫非就是obj.offsetLeft吗?

但是很悲剧的是,obj.offsetLeft并没有这么简单,他是相对于“offsetParent”的距离,即应该是距其上级中定位元素的距离(如果不存在这个元素,则相对于整个页面文档)。
而且更糟的是:对于ie6,ie7,obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

经过以上分析,为了得到【图片到窗口的距离】,我们需要采用下面这种麻烦的办法:从触发元素开始到root节点为止,把各级offsetParent元素的offsetLeft加起来得到【图片到窗口的距离】。

对,排除投机的办法,唯有这样了。参见:Differences in the event object properties/methods(请搜索pageX)

等等,还有投机的方法?没错,在以上链接你可能注意到:当元素是定位元素时候(即relative/absolute元素)。那Firefox的私有属性layerX就等于非Firefox浏览器下的offsetX,好吧,我们回到了原点,一切其实如此美好。

Demo:

标签: , ,

一条评论 发表在“offsetX/Y for Firefox”上

  1. dddd 说:

    顶,谢谢 ):15:(

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(