IE和Mozilla的兼容性汇总[不断追加中。。。]

最新推荐文章于 2021-09-03 08:00:00 发布

yoland

最新推荐文章于 2021-09-03 08:00:00 发布

阅读量553

点赞数

分类专栏：计划和总结文章标签： mozilla ie javascript input button function

本文链接：https://blog.csdn.net/yoland/article/details/2043029

版权

计划和总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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相当。
见代码:

<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方法，可以对节点进行删除，如下：

<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元素节点，如下：

<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两个好用的方法，如下：

<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是没有的。

yoland

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE和Mozilla的兼容性汇总[不断追加中。。。]

1，关于event的用法存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。例如: IE ONLY function doIt(){ alert(event); }这段代码在Mozilla浏览器中是不能正常工作的，因为Mozilla浏览器中没有默认的event对象，只能在事件发生的现场使用。下面看一下两者都兼容的代
复制链接

扫一扫

专栏目录