IE和FF的兼容性汇总_1_Event篇

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量645 收藏 1
点赞数
分类专栏： web_html_jsp_css 文章标签： ie mozilla javascript button function input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/welkin8888/article/details/3582211
版权
摘自：http://blog.csdn.net/LxcJie/archive/2007/08/10/1736463.aspx
Event篇

1，关于event的用法

存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。
例如:
IE ONLY

<input type="button" value="clickMe" οnclick="doIt()">

<script language="javascript">

    function doIt(){

        alert(event);

    }

</script>



这段代码在Mozilla浏览器中是不能正常工作的，因为Mozilla浏览器中没有默认的event对象，只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz

<input type="button" value="clickMe" οnclick="doIt(event)">

<script language="javascript">

    function doIt(oEvent){

        alert(oEvent);

    }

</script>


2，关于event.srcElement[IE]和event.target[Moz]

Mozilla下的e.target相当于ie下的event.srcElement，但细节上有区别，后者是返回一个Html Element 
而e.target返回的是个节点，也就是说包括文本节点。
看下面的例子代码，可以看出两者的区别和联系:

IE ONLY

<table border="1" width="50%" οnclick="doIt()">

  <tr><td>1</td><td>2</td></tr>

  <tr><td>3</td><td>4</td></tr>

</table>

<script language="javascript">

    function doIt(){

        alert(event.srcElement.tagName);

    }

</script>


Moz

<table border="1" width="50%" οnclick="doIt()">

  <tr><td>1</td><td>2</td></tr>

  <tr><td>3</td><td>4</td></tr>

</table>

<script language="javascript">

    function doIt(oEvent){

        var oTarget = oEvent.target;

        while(oTarget.nodeType != 1)

            oTarget = oTarget.parentNode;

        alert(oTarget.tagName);

    }

</script>


3，键盘值的取得

Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE

<input type="text" οnkeypress="doIt()">

<script language="javascript">

    function doIt(){

        alert(event.keyCode);

    }

</script>


Moz

<input type="text" οnkeypress="doIt(event)">

<script language="javascript">

    function doIt(oEvent){

        alert(oEvent.which)

    }

</script>


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

<div id="myDiv" οnclick="doIt(event)" style="position:absolute;top:100;left:100;

                 width:100;height:100;background-color:orange;border:1px solid black">


<script language="javascript">

    function doIt(oEvent){

        var posX = oEvent.x ? oEvent.x : oEvent.pageX;

        var posY = oEvent.y ? oEvent.y : oEvent.pageY;

        alert("X:" + posX + "/nY:" + posY)

    }

</script>


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

<div id="myDiv" οnclick="doIt(event)" style="position:absolute;top:100;left:100;

                 width:100;height:100;background-color:orange;border:1px solid black">


<script language="javascript">

    function doIt(oEvent){

        var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX;

        var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY;

        alert("X:" + posX + "/nY:" + posY)

    }

</script>


6，事件绑定

事件绑定上Mozilla用addEventListener，removeEventListener
对应IE的attachEvent，detatchEvent 
看下面的例子代码:

IE ONLY

<input type="button" value="test" id="testBT">

<script language="javascript">

var oButton = document.getElementById("testBT");

oButton.attachEvent( "onclick", clickEvent );



function clickEvent(){

    alert("Hello, World!");

}

</script>


Moz

<input type="button" value="test" id="testBT">

<script language="javascript">

var oButton = document.getElementById("testBT");

oButton.addEventListener( "click", clickEvent, true );



function clickEvent(){

    alert("Hello, World!");

}

</script>


注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。

对象选择篇

1，通过ID访问Html元素

一般直接使用document.getElementById就可以了，如果要兼容IE4，可以再加上document.all

IE&Moz

<input type="button" value="clickMe" id="myButton">

<script language="javascript">

    alert(document.getElementById("myButton").value);

</script>


2，如果要使用document.form.item类似的访问方法，要注意下面的问题：

IE中允许存在类似于 document.formName.item("itemName") 这样的语句，但是Moz下是不可以的
要想在Mozilla下也可以正常运行，需要把写法正规化，如下:

IE&Moz

<body>
   
<form name="myForm">   

<input value="test" id="txt" />
   
</form>   

</body>   

<script language="javascript">   

    alert(document.myForm.elements["txt"].value);   

</script>   


注意:在Mozilla中，访问数组的时候，不能用类似于arr("itemName")的形式，必须使用中括号，而在IE中两者都可以。
另外，在写上面这段测试代码的时候，我发现了Mozilla浏览器的一个有趣的问题，不知道是不是Bug。大家可以试一下下面这段代码:

Moz

<form name="myForm">   

<input value="test" id="txt" />   

</form>   

<script language="javascript">   

alert(document.myForm);   

alert(document.forms.length); //结果为0？？？

</script>   


Moz

<body>

<form name="myForm">

<input value="test" id="txt" />

</form>

</body>

<script language="javascript">

alert(document.myForm);

alert(document.forms.length); //结果为1，正常

</script>

个人认为可能是因为Mozilla太符合Dom标准了吧

DOM篇

1，删除节点

IE中有removeNode方法，可以对节点进行删除，如下：

IE

<input type="button" value="clickMe" id="myButton">   

<script language="javascript">   

    document.getElementById("myButton").removeNode();   

</script>   


但是Mozilla中，没有这个方法，只能是先找到父节点，然后调用Dom方法removeChild才可以达到目的，如下：

IE&Moz

<input type="button" value="clickMe" id="myButton">   

<script language="javascript">   

    var oNode = document.getElementById("myButton");   

    oNode.parentNode.removeChild(oNode);   

</script>       


2，交换节点

IE中有swapNode方法可以交换两个HTML元素节点，如下：

IE

<input type="button" value="first" id="firstButton">

<input type="button" value="second" id="secondButton">

<script language="javascript">

    var oFirst = document.getElementById("firstButton");

    var oSecond = document.getElementById("secondButton");

    oFirst.swapNode(oSecond);

</script>   


但是Mozilla中，没有这个方法，可以自己写函数实现，如下：

IE&Moz

<input type="button" value="first" id="firstButton">

<input type="button" value="second" id="secondButton">

<script language="javascript">



    if(window.Node) {

        Node.prototype.swapNode=function(node) {

            var nextSibling=this.nextSibling;

            var parentNode=this.parentNode;

            node.parentNode.replaceChild(this,node);

            parentNode.insertBefore(node,nextSibling);

        }

    }



    var oFirst = document.getElementById("firstButton");

    var oSecond = document.getElementById("secondButton");

    oFirst.swapNode(oSecond);

</script>


3，关于节点的插入

IE中，有insertAdjacentHTML和insertAdjacentElement两个好用的方法，如下：

IE

<div id="div1" style="border:1px solid black">div1


<script language="javascript">

    var oDiv = document.getElementById("div1");

    var htmlInput = "<input>";

    oDiv.insertAdjacentHTML('beforeEnd',htmlInput);

</script>


但是Mozilla中是没有这两个方法的，为了兼容它们，统一采用Dom的insertBefore方法，如下：

IE&Moz

<div id="div1" style="border:1px solid black">div1


<script language="javascript">

    var oDiv = document.getElementById("div1");

    var oElement = document.createElement("input");

    oElement.type = "text";

    oDiv.insertBefore(oElement,null);

</script>


4，关于innerHTML和innerText

对于innerHTML，IE和Mozilla都是支持的，所以没什么问题，但是对于innerText，只有IE有，Moz是没有的。
JS IE和FF兼容性问题汇总
10-30
标题《JS IE和FF兼容性问题汇总》所反映的知识点主要围绕着在开发JavaScript应用时，针对Internet Explorer（IE）和Mozilla Firefox（MF，又称Firefox）两款浏览器在语法和行为上的差异以及相应解决方案的总结。...
IE和Mozilla中脚本兼容性汇总
08-21
以下是一些关于IE和Mozilla中脚本兼容性的关键点： 1. **事件对象的访问**： - 在IE中，事件对象`event`会自动作为函数参数传递，如`doIt() { alert(event); }`。 - Mozilla不提供默认的全局`event`对象，需要在...
js事件浏览器兼容案例
lxj1137800599的专栏
07-16 281
var EventUtil = { //返回对event对象的引用 getEvent: function (event) { return event ? event : window.event; }, //返回事件的目标 getTarget: function (event) { return event.target ||
只有 IE 的 HTMLDOMNode 有 replaceNode 与 swapNode 方法
Hello World!
04-04 2239
转自：http://www.w3help.org/zh-cn/causes/BT9032 标准参考 无。 问题描述 只有 IE 的 HTMLDOMNode 有 replaceNode 与 swapNode 方法，其他浏览器则不支持。 造成的影响 该问题将造成某些使用本特性设计的功能在非 IE 浏览器中不能实现。 受影响的浏览器 IE6
swapNode兼容处理
vip545058的专栏
04-17 1591
swapNode
java页面的兼容性问题_浏览器兼容性问题大汇总
weixin_30737899的博客
03-02 367
JavaScript1.HTML对象获取问题FireFox：document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法：统一使用document.getElementById(“idName”);2.const问题说明:Firefox下,可以使用const关键字或var关键...
Js在IE和FF兼容性问题汇总【转】
diaoqiu7578的博客
11-06 122
以下以 IE 代替 Internet Explorer，以 FF 代替 Mozzila FF 1. document.form.item 问题 现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 FF 下运行 解决方法： 改用 document.formName.elements["elementName"]...
JS的IE和FF兼容性问题汇总
weixin_30814329的博客
08-08 152
转自：蓝色理想 以下以 IE 代替 Internet Explorer，以 MF 代替 Mozilla FF 一、函数和方法差异 1. getYear()方法 【分析说明】先看一下以下代码： var year=new Date().getYear();document.write(year); 　　在IE中得到的日期是"2010"，在Firefox中看到的日...
IE和FF兼容性问题汇总(JS)
机会牵引人才，人才牵引技术，技术牵引产品，产品牵引资本，资本牵引更多更大的机会。
09-07 825
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF,对于js爱好者必看的一些知识总结。 1. document.form.item 问题 现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 解决方法： 改用 document.formName.elemen
Js在IE和FF兼容性问题汇总
kayzombie的专栏
01-26 437
以下以 IE 代替 Internet Explorer，以 FF 代替 Mozzila FF1. document.form.item 问题现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 FF 下运行解决方法：改用 document.formName.elements["elementName"]2. 集合类对
JS的IE和FF兼容性问题的汇总小结
fan325的博客
09-07 485
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila FF 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在
js_trim()_1
welkin8888的专栏
12-18 2706
javascript的trim()函数的实现在JavaScript中我们需要用到trim的地方很多，但是JavaScript又没有独立的trim函数或者方法可以使用，所以我们需要自己写个trim函数来实现我们的目的比如方法一：String.prototype.trim= function(){      // 用正则表达式将前后空格      // 用空字符串替代。
html_jsp_文本框输入IP地址
welkin8888的专栏
12-19 2498
            IP地址输入                                                            function mask(obj)            {                obj.value = obj.value.replace(/[^/d]/g, );                var key1 = even
${pageContext.request.contextPath}的作用
welkin8888的专栏
12-16 1632
${pageContext.request.contextPath}的作用(2009-05-14 00:00:33)标签：相对路径 绝对路径 jsp action 杂谈 分类：杰伦专题一．问题   JSP中究竟采用绝对路径还是采用相对路径随着所采用技术的越来越复杂，这个问题也变得越来越难以解
JSP页面去掉缓存的方法
welkin8888的专栏
12-17 588
                      
FF和IE的兼容性一览
welkin8888的专栏
02-24 457
 1.E使用window.event，而FF直接使用参数event，下面有一个例子使用javascript监听回车键    window.onload= function(){       document.onkeydown = function(event){           var e= event || window.event;           var keyCode =
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 453
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
FF与IE兼容性问题全解析：统一编码与技巧
本文档主要针对Firefox (FF)和Internet Explorer (IE)浏览器之间的兼容性问题进行总结，探讨了两者在JavaScript编程中的差异，以便开发人员在开发跨浏览器应用时能够更好地理解和处理这些问题。 1. 元素访问方式: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值