js offsetX在ff下兼容

Question

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)所得到的值却不同，应该怎么改呢？

Answer 1

非IE 下获取 OffsetXfunction 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;  
} 

Answer 2

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

Answer 3

<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>

Answer 4

处理一下event事件    function aaa(event){
        var evt = event || window.event;
        var x = evt.clientX;
        var y = evt.clientY;
    }这个格式试试行不？

Answer 5

谢谢muheye
我试了还是不行的

Answer 6

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

Answer 7

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