Javascript下IE与Firefox下的差异兼容写法总结


Posted in Javascript onJune 18, 2010

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的问题。

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
js打印纸函数代码(递归)
Jun 18 #Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 #Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 #Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 #Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 #Javascript
ExtJS 设置级联菜单的默认值
Jun 13 #Javascript
js 未结束的字符串常量错误解决方法
Jun 13 #Javascript
You might like
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
函数式 JavaScript(一)简介
2014/07/07 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
EsLint入门学习教程
2017/02/17 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
django最快程序开发流程详解
2019/07/19 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
自荐信的两点禁忌
2013/10/30 职场文书
银行求职自荐信
2014/06/30 职场文书
工作保证书
2015/01/17 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Python日志模块logging用法
2022/06/05 Python