js offsetX在ff下兼容

[Z_FEI]

ie下可以用offsetX得到相对的x坐标，ff下如下面的方法：
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) {
var coord = {x: 0, y: 0};
while (element){
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord;
}

问题：当在mouseover中offsetX和getOffset(event)所得到的值却不同，应该怎么改呢？

[hch126163]

非IE 下获取 OffsetX

function getOffsetX(evt){
if( evt.offsetX ) return evt.offsetX;

var ele = evt.target || evt.srcElement;
var o = ele;

var x=0;
while( o.offsetParent )
{
x += o.offsetLeft;
o=o.offsetParent;
}
// 处理当元素处于滚动之后的情况
var left = 0;
while( ele.parentNode )
{
left += ele.scrollLeft;
ele=ele.parentNode;
}

return evt.pageX + left - x;
}

[Z_FEI]

谢谢你hch126163，情况是这样的，图片一分为二，鼠标在图片的左边滑动时显示向左的箭头，右边就显示右边的箭头，一分为二的条件在ie下是event.offsetX<width/2，用你写的方法，测试了下，在ff，当鼠标进入图片范围不出来的话就不会改变箭头方向，希望能有办法帮我找到问题，谢谢

[hch126163]

你的全部js 代码贴一下！

[Z_FEI]

<script>
	function upNext(event){
		var img = document.getElementById("imgId");
		var lefturl = document.location;
		var righturl = document.location;
		
		var imgurl = righturl;
		var width = (img.width==undefined) ? img.getAttribute("width") : img.width;
		var x = (event.offsetX==undefined) ? getOffset(event).offsetX : event.offsetX;

		function move(){
			img.style.cursor = '';
			if(event.offsetX<width/2){
				if(lefturl != ''){
					if(window.attachEvent){
						img.style.cursor = 'url(images/left.cur),auto';
					}else{
						img.setAttribute("style","cursor:url(images/left.cur),auto;");
					}
				}
			}else{
				if(righturl != ''){
					if(window.attachEvent){
						img.style.cursor = 'url(images/right.cur),auto';
					}else{
						img.setAttribute("style","cursor:url(images/right.cur),auto;");
					}
				}
			}
			
		}
		
		function up(){
			if(event.offsetX<width/2){
				if(lefturl != ''){
					top.location = lefturl;
				}
			}else{
				if(righturl != ''){
					top.location = righturl;
				}
			}
		}
		
		if(window.attachEvent){
			img.attachEvent("onmousemove",move);
			img.attachEvent("onmouseup",up);
		}else{
			img.addEventListener("mousemove",move,false); 
			img.addEventListener("mouseup",up,false); 
		}
		
		
		
	}

	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)    {
	  var coord = {x: 0, y: 0};
	  while (element){
		coord.x += element.offsetLeft;
		coord.y += element.offsetTop;
		element = element.offsetParent;
	  }
	  return coord;
	}


	if(window.attachEvent){
		document.getElementById("imgId").attachEvent("onmouseover",upNext);
	}else{
		document.getElementById("imgId").addEventListener("mouseover",upNext,false); 
	}
</script>

[muheye]

处理一下event事件

    function aaa(event){
        var evt = event || window.event;
        var x = evt.clientX;
        var y = evt.clientY;
    }

这个格式试试行不？

[Z_FEI]

谢谢muheye
我试了还是不行的

[sohighthesky]

IE下用offsetX,非IE下可以用layerX这个属性（
这个属性只有position为relative或 absolute时才正确）

[Z_FEI]

谢谢sohighthesky
请问是给img设置position这个属性吗？

[sohighthesky]

[Quote=引用 8 楼 z_fei 的回复:]

谢谢sohighthesky
请问是给img设置position这个属性吗？
[/Quote]
是的，不过其父元素可能也需要设置，否则应用 不上

[zyg123]

学习了