IE,firefox

最新推荐文章于 2024-07-08 16:22:29 发布

霸王降临

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量218

点赞数

分类专栏： JS 文章标签： ie mozilla javascript button function input

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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

</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> <mce:script. language="javascript"></mce: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> <mce:script. language="javascript"></mce:script>

3，键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE
<input type="text" nkeypress="doIt()" /><mce:script language="javascript"></mce:script> Moz <input type="text" nkeypress="doIt(event)"><mce:script. language="javascript"></mce: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"></div><mce:script. language="javascript"></mce: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"></div><mce:script. language="javascript"></mce:script>

6，事件绑定
事件绑定上Mozilla用addEventListener，removeEventListener
对应IE的attachEvent，detatchEvent
看下面的例子代码:
IE ONLY
<input type="button" value="test" id="testBT"> <mce:script. language="javascript"></mce:script> Moz <input type="button" value="test" id="testBT"> <mce:script. language="javascript"></mce:script>

注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。
对象选择篇
1，通过ID访问Html元素
一般直接使用document.getElementById就可以了，如果要兼容IE4，可以再加上document.all
IE&Moz
<input type="button" value="clickMe" id="myButton"> <mce:script. language="javascript"></mce: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> <mce:script. language="javascript"></mce:script>

注意:在Mozilla中，访问数组的时候，不能用类似于arr("itemName")的形式，必须使用中括号，而在IE中两者都可以。
另外，在写上面这段测试代码的时候，我发现了Mozilla浏览器的一个有趣的问题，不知道是不是Bug。大家可以试一下下面这段代码:
Moz
<form. name="myForm"> <input value="test" id="txt" /> </form> <mce:script. language="javascript"></mce:script> Moz <body> <form. name="myForm"> <input value="test" id="txt" /> </form> </body> <mce:script. language="javascript"></mce:script>

个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1，删除节点
IE中有removeNode方法，可以对节点进行删除，如下：
IE
<input type="button" value="clickMe" id="myButton"> <mce:script. language="javascript"></mce:script>

但是Mozilla中，没有这个方法，只能是先找到父节点，然后调用Dom方法removeChild才可以达到目的，如下：
IE&Moz
<input type="button" value="clickMe" id="myButton"> <mce:script. language="javascript"></mce:script>

2，交换节点
IE中有swapNode方法可以交换两个HTML元素节点，如下：
IE
<input type="button" value="first" id="firstButton"> <input type="button" value="second" id="secondButton"> <mce:script. language="javascript"></mce:script>

但是Mozilla中，没有这个方法，可以自己写函数实现，如下：
IE&Moz
<input type="button" value="first" id="firstButton"> <input type="button" value="second" id="secondButton"> <mce:script. language="javascript"></mce:script>

3，关于节点的插入
IE中，有insertAdjacentHTML和insertAdjacentElement两个好用的方法，如下：
IE
<div id="div1" style="border:1px solid black" mce_style="border:1px solid black">div1</div> <mce:script. language="javascript"></mce:script>

但是Mozilla中是没有这两个方法的，为了兼容它们，统一采用Dom的insertBefore方法，如下：
IE&Moz
<div id="div1" style="border:1px solid black" mce_style="border:1px solid black">div1</div> <mce:script. language="javascript"></mce:script>

4，关于innerHTML和innerText
对于innerHTML，IE和Mozilla都是支持的，所以没什么问题，但是对于innerText，只有IE有，Moz是没有的

霸王降临

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE,firefox

<br /> 1，关于event的用法 <br />存在问题：IE中可以直接使用event对象，但是Mozilla不可以直接使用。 <br />例如: <input type="button" value="clickMe" nclick="doIt()"><mce:script. language="javascript"></mce:script> 这段代码在Mozilla浏览器中是不能正常工作的，因为M
复制链接

扫一扫