JavaScript在IE浏览器和Firefox浏览器中的差异总结

window.event对象差异 
IE:有window.event对象 
FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(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。

标签的x和y的坐标位置:style.posLeft 和 style.posTop 
IE:有。 
FF:没有。 
通用:object.offsetLeft 和 object.offsetTop。

获取窗体的高度和宽度 
IE:document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。 
FF:window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。 
通用:document.body.clientWidth和document.body.clientHeight。

添加事件 
IE:element.attachEvent(”onclick”, func);。 
FF:element.addEventListener(”click”, func, true)。 
通用:element.onclick=func。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的,onclick只有执行一个过程,而attachEvent和addEventListener执行的是一个过程列表,也就是多个过程。例如:element.attachEvent(”onclick”, func1);element.attachEvent(”onclick”, func2)这样func1和func2都会被执行。

在这里断桥残雪,曾经写过一个通用的添加删除绑定事件的函数,大家可以查看以下文章:《JavaScript跨浏览器的添加删除事件绑定函数》

标签的自定义属性 
IE:如果给标签div1定义了一个属性value,可以div1.value和div1["value"]取得该值。 
FF:不能用div1.value和div1["value"]取。 
通用:div1.getAttribute(”value”)。

父节点、子节点和删除节点 
IE:parentElement、parement.children,element.romoveNode(true)。 
FF:parentNode、parentNode.childNodes,node.parentNode.removeChild(node)。

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft 
screenX:鼠标在显示屏幕上的坐标。 
clientX:鼠标在页面显示区域的坐标。 
注:以上两个都是各浏览器通用的。以下为特有方法:

pageX:FF特有,鼠标在页面上的位置,从页面左上角开始定位,这个可以很方便在整个页面上进行定位,IE没有直接替换的属性。 
layerX:FF特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。 
offsetX:IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。 
x:IE特有,跟layerX一个效果,可作为layerX的直接替换属性。 
注:IE和FF的定位有个1px的差别,实际上,IE的定位从0开始,FF的定位从1开始,FF永远会比IE大1px,需要根据实际情况处理。

offsetLeft:这个属性不是事件对象的属性,而是DOM对象所有的,该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样。

FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。

时间: 2024-07-30 18:58:56

JavaScript在IE浏览器和Firefox浏览器中的差异总结的相关文章

Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法

一直以来看到各大网站的FLASH都是黑框框的,很好奇,难道他们不知道flash是可以设成透明的?于是用IE Tab插件浏览了下,发现人家的网页又正常,这样一来我就开始怀疑是我的Chrome有问题,于是在换了多台电脑,多种操作系统之后找到了治标治本的方法:在遇到这里网站时,尽量用IE,如果你的网站也在这类网站之中,那么你可能需要修改自己的网站代码这是一则flash设置为透明的html代码 <param name="wmode" value="transparent&quo

Selenium Python浏览器调用:伪浏览器

WebDriver驱动介绍 因为移动端的driver目前没有接触,所以主要介绍PC端driver,PC端的driver都是基于浏览器的,主要分为2种类型: 一种是真实的浏览器driver:safari.firefox.ie.chrome等 比如:safari.firefox.ie.chrome都是通过浏览器原生组件来调用浏览器的原生API,这些driver都是直接启动并通过调用浏览器的底层接口来驱动浏览器的,因此具有最真实的用户场景模拟,主要用于进行web的兼容性测试使用. 一种是伪浏览器dri

selenium,在Eclipse中打开fireFox浏览器报错:org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms

1. 相信很多同学刚接触selenium时,在Eclipse中打开fireFox浏览器是报报错:org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output:...(异常代码太多此处省略) 在网上找了好多方法都是不能解决问题,结果是焦头烂额! 2.其实这是selenium的jar包和

解决ubuntu中firefox浏览器总是提示找不到服务器的问题

这个情况在我机器上经常出现,而且时不时的给你出点问题,但是有些时候等一下就好了,或者把引擎换到百度的话它就又行得通了.. 被这个问题搞得很烦,上网查了下说是防火墙啊之类的出问题,但是自己弄了后这个问题还是经常出现,不过好好查了下资料还是发现了问题所在,感觉这脑袋真的挺笨的.. 如果在ping其他主机,本地地址等一些地址后都没问题的话,那应该就是dns域名解析出了问题了. 查看dns域名解析配置文件: $cat /etc/resolv.conf 比如我的是这个信息: # Dynamic resol

[JavaScript] js判断是否在微信浏览器中打开

用JS来判断了,经过查找资料终于实现了效果, function is_weixn(){     var ua = navigator.userAgent.toLowerCase();     if(ua.match(/MicroMessenger/i)=="micromessenger") {         return true;     } else {         return false;     } } 通过测试完全通过,无论是android 还是iphone,ipad

PDF在线阅读控件多浏览器(IE,firefox,chrome,opera等)中的使用

iStylePDF是基于ActiveX技术开发的一个COM组件,一般是应用于IE浏览器中来使用,但是随着越来越多的浏览器出现,导致客户端的环境非常复杂,客户的需求又是多样化的,所以我们这里介绍了一种更快的让我们的COM组件在各种浏览器中通行无阻的方法. 浏览器现在的主流一般分为IE内核和非IE内核浏览器,IE浏览器中的使用无需太多的说明,直接应用object对象就可以使用了. 如图所示: 启动页面的时候判断下浏览器类型 非IE内核浏览器基本上都支持NPAPI插件模式,我们提供了一个简单的控件注册

firefox浏览器中silverlight无法输入问题

今天用firefox浏览silverlight网页,想在文本框中输入内容,却没想到silverlight插件意外崩溃了.google一下,发现这是firefox的设置问题,解决方法如下: 1.在Firefox浏览器地址栏输入 about:config 2.点击“我保证会小心” 3.查找项目dom.ipc.plugins.enabled.npccbnetsigncom.dll,把它由 false 改成 true 4.关闭Firefox浏览器,再启动,OK

textarea在firefox浏览器中边框内阴影的消除办法

问题现象 如下图所示,textarea在firefox中显示有内阴影.chrome浏览器中却没有这样的效果.这是为何呢? 应用了同样的样式,为何在不同的浏览器中显示的效果不尽相同?如何去除firefox显示效果中的内阴影呢? 分析 我们将边框的宽度加大,看看"阴影"是什么? 从效果上看这个阴影应该是一种border-style.不同的浏览器中使用了不同border-style样式.手动将border-style固化为solid, 如下所示: textarea { width: 400p

javascript 获取页面高度(多种浏览器)(转)

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (