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
分享到:
相关推荐
### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...
IE 和 Firefox 对事件对象中的坐标属性的支持不同。 **说明:** - **IE环境下**,事件对象包含 `x` 和 `y` 属性,但没有 `pageX` 和 `pageY` 属性。 - **Firefox环境下**,事件对象包含 `pageX` 和 `pageY` 属性,...
JavaScript是一种广泛应用于网页开发的脚本语言,但在不同的浏览器中,其执行方式可能存在差异,特别是老版本的Internet Explorer(IE)和Firefox。由于历史原因,IE对某些特性有着独特的实现,而Firefox则遵循更...
然而,由于不同浏览器的实现差异,特别是Internet Explorer(IE)和Firefox,开发者经常面临兼容性问题。以下是一些关键的JavaScript兼容处理策略: 1. **数组、集合类对象的元素访问** - IE支持`for...in`循环...
然而,由于历史原因和技术演进的差异,不同浏览器对JavaScript的支持程度和解析方式存在显著区别,尤其是Internet Explorer(IE)与Mozilla Firefox之间。本文将深入探讨在IE和Firefox中常见的JavaScript兼容性问题...
由于IE和Firefox在事件对象的获取上有差异,我们需要编写一段通用的代码来适应这两种情况。以下是一段示例代码: ```javascript function test(event) { var event = event || window.event; // doSomething } ``...
### IE和Firefox中JavaScript兼容性解析 在Web开发过程中,浏览器兼容性问题一直是开发者们重点关注的问题之一。不同的浏览器对同一段代码的解析和执行可能会有所不同,尤其是早期版本的Internet Explorer(IE)和...
CSS和JavaScript在Internet Explorer(IE)和Firefox这两个浏览器中存在诸多差异,这些差异主要体现在DOM操作、属性访问、事件处理等方面。以下是一些关键的不同点: 1. **文档对象模型(DOM)操作** - **form元素...
- **问题描述**:在IE和部分版本的Firefox中,可以通过`window.location`或`window.location.href`获取当前页面的URL;但在某些旧版本的Firefox中,只能使用`window.location`。 - **解决方案**:建议始终使用`...
本文将深入探讨在Internet Explorer(IE)、Firefox、Chrome三大主流浏览器中实现event兼容调用的方法,重点解析事件对象的获取及鼠标坐标获取的差异。 #### 事件对象的兼容性获取 在JavaScript中,事件处理通常...
特别是对于早期版本的Internet Explorer (IE) 和 Firefox (MF),由于它们对JavaScript的支持存在差异,因此开发者需要特别注意以确保网页脚本能够兼容这些浏览器。本文将详细探讨在编写JavaScript时遇到的一些常见...
JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....
- IE中的`event.x`和`event.y`在Firefox中分别对应`event.pageX`和`event.pageY`。可以使用条件语句来获取兼容的坐标,如`mX = event.x ? event.x : event.pageX`。 10. 处理frame: - 在IE中,可以直接用`window...
本文将深入探讨IE(Internet Explorer)和Firefox(Mozzila Firefox)之间的JS差异,这对于开发和面试都是极其重要的。 1. **文档对象模型(DOM)访问差异** - `document.form.item`问题:在IE中,可以通过`document...
本文将详细讲解如何在不同的浏览器环境下,包括IE和Firefox,获取鼠标的坐标位置,并提供相应的源码示例。 首先,我们需要理解在浏览器环境中,鼠标的坐标通常有两种表示方式:页面坐标和元素坐标。页面坐标是指...
- **使用`document.formName.elements["elementName"]`**:这是一种更通用且符合W3C标准的方法,同时在IE和Firefox中都得到良好支持。 #### 2. 数组操作 - **在使用数组时需注意**:在处理如`document.forms["form...
### JavaScript的IE与Firefox兼容性解决方案 #### 一、`document.form.item` 问题 - **现有问题**:代码中存在大量使用 `document.formName.item("itemName")` 的语句,这种写法在 Mozilla Firefox(简称MF)...
- IE支持`showModalDialog`和`showModelessDialog`打开模态和非模态窗口,FireFox不支持。替代方案是使用`window.open`方法。 五、父元素属性 - IE中使用`obj.parentElement`,而FireFox使用`obj.parentNode`。...
- IE中,通过事件对象的`event.clientX`和`event.clientY`获取鼠标坐标,Firefox则需要传递事件对象给函数,然后通过`ev.pageX`和`ev.pageY`获取。 7. 元素边界问题: - IE计算宽度和高度时包括边框,而Firefox不...
至于兼容性问题,IE和Firefox对某些JavaScript特性支持的时间和方式有所不同。例如,老版本的IE不支持`addEventListener`,需要使用`attachEvent`。此外,IE使用`currentStyle`对象获取元素样式,而其他现代浏览器则...