`
ynztpwl
  • 浏览: 61955 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/liqinghuiyx/archive/2010/05/11/5577893.aspx

分享到:
评论

相关推荐

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...

    ie 和 firefox 的javascript 兼容问题(网上下载的).doc

    IE 和 Firefox 对事件对象中的坐标属性的支持不同。 **说明:** - **IE环境下**,事件对象包含 `x` 和 `y` 属性,但没有 `pageX` 和 `pageY` 属性。 - **Firefox环境下**,事件对象包含 `pageX` 和 `pageY` 属性,...

    Javascript的IE和Firefox兼容性参考

    JavaScript是一种广泛应用于网页开发的脚本语言,但在不同的浏览器中,其执行方式可能存在差异,特别是老版本的Internet Explorer(IE)和Firefox。由于历史原因,IE对某些特性有着独特的实现,而Firefox则遵循更...

    Javascript在IE和FireFox中的兼容处理

    然而,由于不同浏览器的实现差异,特别是Internet Explorer(IE)和Firefox,开发者经常面临兼容性问题。以下是一些关键的JavaScript兼容处理策略: 1. **数组、集合类对象的元素访问** - IE支持`for...in`循环...

    javascript在IE和Firefox中兼容性问题

    然而,由于历史原因和技术演进的差异,不同浏览器对JavaScript的支持程度和解析方式存在显著区别,尤其是Internet Explorer(IE)与Mozilla Firefox之间。本文将深入探讨在IE和Firefox中常见的JavaScript兼容性问题...

    兼容IE与FireFox

    由于IE和Firefox在事件对象的获取上有差异,我们需要编写一段通用的代码来适应这两种情况。以下是一段示例代码: ```javascript function test(event) { var event = event || window.event; // doSomething } ``...

    IE和Firefox中J avaScript兼容

    ### IE和Firefox中JavaScript兼容性解析 在Web开发过程中,浏览器兼容性问题一直是开发者们重点关注的问题之一。不同的浏览器对同一段代码的解析和执行可能会有所不同,尤其是早期版本的Internet Explorer(IE)和...

    css和javascript在IE和Firefox中二十三个不同点

    CSS和JavaScript在Internet Explorer(IE)和Firefox这两个浏览器中存在诸多差异,这些差异主要体现在DOM操作、属性访问、事件处理等方面。以下是一些关键的不同点: 1. **文档对象模型(DOM)操作** - **form元素...

    ie firefox 兼容问题大全

    - **问题描述**:在IE和部分版本的Firefox中,可以通过`window.location`或`window.location.href`获取当前页面的URL;但在某些旧版本的Firefox中,只能使用`window.location`。 - **解决方案**:建议始终使用`...

    event兼容调用(IE,Firefox,Chrome)

    本文将深入探讨在Internet Explorer(IE)、Firefox、Chrome三大主流浏览器中实现event兼容调用的方法,重点解析事件对象的获取及鼠标坐标获取的差异。 #### 事件对象的兼容性获取 在JavaScript中,事件处理通常...

    Javascript的IE和Firefox兼容性汇编 .txt

    特别是对于早期版本的Internet Explorer (IE) 和 Firefox (MF),由于它们对JavaScript的支持存在差异,因此开发者需要特别注意以确保网页脚本能够兼容这些浏览器。本文将详细探讨在编写JavaScript时遇到的一些常见...

    javascript在firefox与ie下的兼容性总结

    JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....

    IE 与FireFox 区别概要总结

    - IE中的`event.x`和`event.y`在Firefox中分别对应`event.pageX`和`event.pageY`。可以使用条件语句来获取兼容的坐标,如`mX = event.x ? event.x : event.pageX`。 10. 处理frame: - 在IE中,可以直接用`window...

    IE&FireFox;的JS区别

    本文将深入探讨IE(Internet Explorer)和Firefox(Mozzila Firefox)之间的JS差异,这对于开发和面试都是极其重要的。 1. **文档对象模型(DOM)访问差异** - `document.form.item`问题:在IE中,可以通过`document...

    JS获得鼠标位置(兼容多浏览器ie,firefox)

    本文将详细讲解如何在不同的浏览器环境下,包括IE和Firefox,获取鼠标的坐标位置,并提供相应的源码示例。 首先,我们需要理解在浏览器环境中,鼠标的坐标通常有两种表示方式:页面坐标和元素坐标。页面坐标是指...

    js firefox支持问题

    - **使用`document.formName.elements["elementName"]`**:这是一种更通用且符合W3C标准的方法,同时在IE和Firefox中都得到良好支持。 #### 2. 数组操作 - **在使用数组时需注意**:在处理如`document.forms["form...

    javascript的IE和Firefox兼容性汇编

    ### JavaScript的IE与Firefox兼容性解决方案 #### 一、`document.form.item` 问题 - **现有问题**:代码中存在大量使用 `document.formName.item("itemName")` 的语句,这种写法在 Mozilla Firefox(简称MF)...

    FireFox-IE兼容汇总

    - IE支持`showModalDialog`和`showModelessDialog`打开模态和非模态窗口,FireFox不支持。替代方案是使用`window.open`方法。 五、父元素属性 - IE中使用`obj.parentElement`,而FireFox使用`obj.parentNode`。...

    firefox和IE系列的相关区别整理 以备后用

    - IE中,通过事件对象的`event.clientX`和`event.clientY`获取鼠标坐标,Firefox则需要传递事件对象给函数,然后通过`ev.pageX`和`ev.pageY`获取。 7. 元素边界问题: - IE计算宽度和高度时包括边框,而Firefox不...

    JavaScript实现弹出层的移动 兼容IE和Firefox

    至于兼容性问题,IE和Firefox对某些JavaScript特性支持的时间和方式有所不同。例如,老版本的IE不支持`addEventListener`,需要使用`attachEvent`。此外,IE使用`currentStyle`对象获取元素样式,而其他现代浏览器则...

Global site tag (gtag.js) - Google Analytics