• 首页>
  • 软件教程>
  • IE和firefox浏览器的event事件兼容性怎么样?兼容性汇总分享

IE和firefox浏览器的event事件兼容性怎么样?兼容性汇总分享

2024-06-24 10:36:57阅读量:44 字体:

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

IE和firefox浏览器的event事件兼容性怎么样?兼容性汇总分享

例如:

function doIt(){

alert(event);

}

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

function doIt(oEvent){

alert(oEvent);

}

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

12
34

function doIt(){ alert(event.srcElement.tagName); }

Moz

12
34

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
function doIt(){ alert(event.keyCode); }

Moz
function doIt(oEvent){ alert(oEvent.which) }

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

function doIt(oEvent){ var posX = oEvent.x ? oEvent.x : oEvent.pageX; var posY = oEvent.y ? oEvent.y : oEvent.pageY; alert("X:" + posX + "Y:" + posY) }

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

function doIt(oEvent){ var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX; var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY; alert("X:" + posX + "Y:" + posY) }

6,事件绑定
事件绑定上Mozilla用addEventListener,removeEventListener
对应IE的attachEvent,detatchEvent
看下面的例子代码:
IE ONLY
var Button = document.getElementById("testBT");oButton.attachEvent( "onclick", clickEvent );function clickEvent(){ alert("Hello, World!");}

Moz
var Button = document.getElementById("testBT");oButton.addEventListener( "click", clickEvent, true );function clickEvent(){ alert("Hello, World!");}

注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。
对象选择篇
1,通过ID访问Html元素
一般直接使用document.getElementById就可以了,如果要兼容IE4,可以再加上document.all
IE&Moz
alert(document.getElementById("myButton").value);

2,如果要使用document.form.item类似的访问方法,要注意下面的问题:
IE中允许存在类似于 document.formName.item("itemName") 这样的语句,但是Moz下是不可以的
要想在Mozilla下也可以正常运行,需要把写法正规化,如下:
IE&Moz
alert(document.myForm.elements["txt"].value);

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

Moz
alert(document.myForm);alert(document.forms.length); //结果为1,正常

个人认为可能是因为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
var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);

但是Mozilla中,没有这个方法,可以自己写函数实现,如下:
IE&Moz
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 First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);

3,关于节点的插入
IE中,有insertAdjacentHTML和insertAdjacentElement两个好用的方法,如下:
IE

div1 var Div = document.getElementById("div1"); var htmlInput = ""; oDiv.insertAdjacentHTML('beforeEnd',htmlInput);

但是Mozilla中是没有这两个方法的,为了兼容它们,统一采用Dom的insertBefore方法,如下:
IE&Moz

div1

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


推荐阅读

  • 苹果平板如何隐藏app软件

    苹果平板如何隐藏app软件

    苹果平板没有隐藏app软件的功能,但是可以把app下载到资源库中,这样就不会显示在平板的桌面上,操作方法如下: 苹果平板如何隐藏app软件 1、打开平板的设置,点击主屏幕”按钮,进入主屏幕...

    阅读: 870

  • 荣耀x30如何升级鸿蒙系统

    荣耀x30如何升级鸿蒙系统

    荣耀x30手机升级鸿蒙系统需要去手机的设置内进行手动点击升级,系统会自动进行检测,具体的操作步骤如下: 荣耀x30如何升级鸿蒙系统 1、打开手机的设置,点击系统和更新”按钮,进入系统设置中...

    阅读: 979

  • 手机淘宝首页布局怎么变了

    手机淘宝首页布局怎么变了

    手机淘宝首页布局变了可能是开启了长辈模式,开启长辈模式的布局就会改变,可以通过设置改回原来的布局,具体操作步骤如下: 手机淘宝首页布局怎么变了 1、打开淘宝app,点击我的淘宝,再点击右上角的齿轮进入...

    阅读: 970

  • 强制解除小红书实名认证

    强制解除小红书实名认证

    小红书账号一旦实名认证过了就不能解除实名认证了,只能通过注销账号的方式来解除实名认证。具体的操作方式如下: 强制解除小红书实名认证 1、打开小红书,点击进入我”的界面,再点击右上角的三条横...

    阅读: 923

  • 快手怎么买热门

    快手怎么买热门

    上了快手热门的视频可以推送给更多的用户,让视频得到更高的热度,在快手买热门的具体操作方式如下: 快手怎么买热门 1、打开快手,点击左上角的三条横线”,进入功能栏”界面。 2...

    阅读: 880

  • 微信闭关中是什么状态

    微信闭关中是什么状态

    微信闭关中是不与外界往来的状态。微信状态显示闭关,可能是因为最近比较忙,又或者是碰到烦心的事情,有一种自我封闭的含义。以下是设置微信状态的操作方法: 微信闭关中是什么状态 1、打开微信,点击我&rdq...

    阅读: 871