ie 与火狐的坐标 取得

Firefox下的坐标

左直拳

 

FireFox下的坐标与IE有所不同。

1、鼠标坐标

要获取鼠标的坐标,离不开事件event这个对象。在IE里,event是全局对象,你可以在任何地方引用event,或者用 event.srcElement 来找到触发事件的对象。但是FF不行,必须在触发事件调用的函数里,将event作为参数传过去才能用,如onclick(event)。

鼠标当前坐标
IE:event.x和event.y。
FF:event.pageX和event.pageY。

通用:两者都有event.clientX和event.clientY属性。


鼠标当前坐标(加上滚动条滚过的距离)
IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。

 

2、样式(style)坐标

IE:style.left,style.top

FF:style.left,style.top

IE:style.posLeft 和 style.posTop
FF:没有。

 

3、对象坐标

通用:两者都有[object].offsetLeft 和 [object].offsetTop

问题是,在FF(FireFox)中,它们是返回与BODY的偏移,而在IE中,是其所在容器中的水平及垂直偏移。

那么怎样在IE中也能获得与BODY的偏移呢?因为这个偏移才最有用,找到了这两个偏移,就相当于找到了在页面中的绝对位置。

可以变通一下:

var posX = objLookingFor.offsetLeft;

var posY = objLookingFor.offsetTop;

var aBox = objLookingFor;//需要获得位置的对象

do {

aBox = aBox.offsetParent;

posX += aBox.offsetLeft;

posY += aBox.offsetTop;

} while( aBox.tagName != "BODY" );

 

这样到最后,posX与posY就是与BODY的偏移。

但这也不是绝对的,有例外:例外,就是当该元素位于表格的TD中时,offsetLeft的值是该元素外边界至其所在TD左侧内侧边界的值,也即是说此时元素的offsetLeft表现类似于在IE中。这时获取坐标方法可以为:

//oElement是某对象

var width = oElement.offsetWidth;

  var height = oElement.offsetHeight;  

  if( oElement.offsetParent.tagName == "BODY" || appname == "Netscape")

  {

    var pos = {x:0,y:0};

    pos.x = oElement.offsetLeft;

    pos.y = oElement.offsetTop;

    var x = 0, y = 0;

    while( oElement.offsetParent )

    {

        //累加从该元素起至父元素的offsetLeft和offsetTop

        x += oElement.offsetParent.offsetLeft;

        y += oElement.offsetParent.offsetTop;

        //遇到table标签则表明累计的量都应该累加到该元素的offsetLeft和offsetTop(Table中按IE方式计算)

        if( oElement.offsetParent.tagName.toLowerCase() == "table" )

        {

            pos.x += x;

            pos.y += y;

            x = 0;

            y = 0;

        }

        oElement = oElement.offsetParent;

    }   

    return [pos.x,pos.y,pos.x + width,pos.y + height];

}

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/leftfist/archive/2008/09/24/2973877.aspx

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值