offsetX/Y for Firefox

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是相对其直接父级的距离——显然他们没有遵循标准。

<!doctype html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
#a{width:500px;height:500px;background:#ccc;padding:50px;}
#b{width:400px;height:400px;background:#ddd;padding:50px;}
#c{width:300px;height:300px;background:#eee;padding:50px;}
</style>
</head>
<body>
<div id='a' style='position:relative;'>
	a
	<div id='b'>
	b
		<div id='c'></div>
	</div>
</div>
</body>
<script>
	$id=function(o){return document.getElementById(o) || o }
	$id('c').innerHTML='c的offsetLeft=' + $id('c').offsetLeft
</script>
</html>

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

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

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

Demo:

<!DOCTYPE html>
<html>
<head>
<title>兼容firefox的offsetX</title>
<style type="text/css">
.box{width:300px;height:150px;border:1px solid #ccc;margin:50px;padding:50px;border:3px solid #ccc;font-size:12px;}
.ruler{position:relative;}
</style>
</head>
<body>
<div class='box'>
	<img class='ruler' src='http://www.ibm.com/developerworks/cn/linux/l-pixelruler/ruler10.gif' onmousemove='sizer(event)' />
	<div id='ct'></div>
</div>
<script type='text/javascript'>
var $id=function(id){
	return document.getElementById(id) || id;
}
function sizer(e){
	var e=window.event || e,
		posX=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ;
		$id('ct').innerHTML='offsetX:'+posX + ' <i>(FF不支持，但通过其他方法获取)</i>'
+'<br />clientX:' +e.clientX
+'<br />layerX:' +e.layerX + ' <i>(ie,opera不支持)</i>'
+'<br />pageX:'+ e.pageX + ' <i>(ie不支持)</i>'
;
}
function getOffset(e)
{
  var target = e.target;
  if (target.offsetLeft == undefined)
  {
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord =
  {     //计算鼠标位置（触发元素与窗口的距离）
    x: window.pageXOffset + e.clientX,
    y: window.pageYOffset + e.clientY
  };
  var offset =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
function getPageCoord(element)    //计算从触发到root间所有元素的offsetLeft值之和。
{
  var coord = {x: 0, y: 0};
  while (element)
  {
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
</script>
</body>
</html>