IE和firefox浏览器的event事件兼容性汇总_javascript技巧
存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用。
例如:
下面看一下两者都兼容的代码:
IE&Moz
event)">
2,关于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相当于ie下的event.srcElement,但细节上有区别,后者是返回一个Html Element
而e.target返回的是个节点,也就是说包括文本节点。
看下面的例子代码,可以看出两者的区别和联系:
IE ONLY
1 | 2 |
3 | 4 |
function doIt(){ alert(event.srcElement.tagName); }
Moz
1 | 2 |
3 | 4 |
function doIt(oEvent){
var Target = oEvent.target;
while(oTarget.nodeType != 1)
Target = oTarget.parentNode;
alert(oTarget.tagName);
}
3,键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE
Moz
4,event.x,event.y[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的绝对位置,使用event对象的event.x和event.y
Moz中取鼠标点击的绝对位置,使用event对象的event.pageX和event.pageY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz
5,event.offsetX,event.offsetY[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的相对位置,使用event对象的event.offsetX和event.offsetY
Moz中取鼠标点击的相对位置,使用event对象的event.layerX和event.layerY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz
6,事件绑定
事件绑定上Mozilla用addEventListener,removeEventListener
对应IE的attachEvent,detatchEvent
看下面的例子代码:
IE ONLY
Moz
注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。
对象选择篇
1,通过ID访问Html元素
一般直接使用document.getElementById就可以了,如果要兼容IE4,可以再加上document.all
IE&Moz
2,如果要使用document.form.item类似的访问方法,要注意下面的问题:
IE中允许存在类似于 document.formName.item("itemName") 这样的语句,但是Moz下是不可以的
要想在Mozilla下也可以正常运行,需要把写法正规化,如下:
IE&Moz
注意:在Mozilla中,访问数组的时候,不能用类似于arr("itemName")的形式,必须使用中括号,而在IE中两者都可以。
另外,在写上面这段测试代码的时候,我发现了Mozilla浏览器的一个有趣的问题,不知道是不是Bug。大家可以试一下下面这段代码:
Moz
Moz
个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1,删除节点
IE中有removeNode方法,可以对节点进行删除,如下:
IE
document.getElementById("myButton").removeNode();
但是Mozilla中,没有这个方法,只能是先找到父节点,然后调用Dom方法removeChild才可以达到目的,如下:
IE&Moz
var Node = document.getElementById("myButton");
oNode.parentNode.removeChild(oNode);
2,交换节点
IE中有swapNode方法可以交换两个HTML元素节点,如下:
IE
但是Mozilla中,没有这个方法,可以自己写函数实现,如下:
IE&Moz
3,关于节点的插入
IE中,有insertAdjacentHTML和insertAdjacentElement两个好用的方法,如下:
IE
但是Mozilla中是没有这两个方法的,为了兼容它们,统一采用Dom的insertBefore方法,如下:
IE&Moz
var Div = document.getElementById("div1");
var Element = document.createElement("input");
oElement.type = "text";
oDiv.insertBefore(oElement,null);
4,关于innerHTML和innerText
对于innerHTML,IE和Mozilla都是支持的,所以没什么问题,但是对于innerText,只有IE有,Moz是没有的
更多相关文章
IE和Firefox在JavaScript应用中的兼容性探讨
IE与Firefox在JavaScript上的7个不同写法小结
javascript css在IE和Firefox中区别分析
JS的IE和Firefox兼容性集锦
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
- 最新文章
- 热门排行
上一篇: 传智播客张鹏带你一周hold住html+css视频资料分享
下一篇: php用户提交的数据
推荐阅读
-
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结_javascript技巧
-
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别_javascript技巧
-
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码_javascript技巧
-
整理的比较全的event对像在ie与firefox浏览器中的区别_javascript技巧
-
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
-
IE和Firefox在JavaScript应用中的兼容性探讨_javascript技巧
-
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结_javascript技巧
-
IE和Firefox在JavaScript应用中的兼容性探讨_javascript技巧
-
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)_javascript技巧
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论