Home Web Front-end JS Tutorial Summary of event compatibility between IE and Firefox browsers_javascript skills

Summary of event compatibility between IE and Firefox browsers_javascript skills

May 16, 2016 pm 06:40 PM
event ie mozilla

1,关于event的用法
存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用。
例如:
     function doIt(){ 
           alert(event);
       }
这段代码在Mozilla浏览器中是不能正常工作的,因为Mozilla浏览器中没有默认的event对象,只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz
event)">
       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 + "\nY:" + 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 + "\nY:" + 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);

However, these two methods are not available in Mozilla. In order to be compatible with them, Dom's insertBefore method is uniformly used, as follows:
IE&Moz

div1

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

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

oElement.type = "text";

oDiv.insertBefore(oElement,null);

4, about innerHTML and innerText
For innerHTML, both IE and Mozilla support it, so there is no problem, but for innerText, only IE has it, but Moz does not have it
More related articles
Discussion on the compatibility of IE and Firefox in JavaScript applications
Summary of 7 different ways of writing JavaScript in IE and Firefox
javascript css in IE and Firefox Difference analysis
JS IE and Firefox compatibility collection

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Mozilla Firefox cannot load the XPCOM plug-in solution Mozilla Firefox cannot load the XPCOM plug-in solution Apr 24, 2023 am 10:22 AM

Mozilla Firefox ranks third in the list of browser users such as Google Chrome, Safari, and Opera. But sometimes while opening Firefox users complain with error message "Cannot load XPCOM!". This error does not allow Mozilla Firefox to open at all. If you are one of the users looking for emergency solutions, you have come to the right place. Quick fix – 1. Try restarting your device once. Then, try opening Firefox again. 2. Check the Internet connection. Fix 1 – Refresh Firefox Try refreshing Firefox before doing anything else. 1. You have to press ⊞Win key + R

Mozilla's Thunderbird email client has been completely restructured and a new version 115 will be released in July Mozilla's Thunderbird email client has been completely restructured and a new version 115 will be released in July Mar 05, 2024 pm 06:52 PM

According to recent news, Mozilla’s open source email client Thunderbird has previously updated its logo, and its user interface is currently being updated. Mozilla has completely refactored Thunderbird. The application is now in rapid development, and its software version has jumped directly from 91 to 102. ▲Picture source Mozilla Thunderbird ▲Picture source Mozilla Thunderbird In February this year, Mozilla issued a press release stating that it would launch a major renovation project for the email client Thunderbird. Since early 2020, development of Thunderbird has been carried out by Mozilla subsidiary MZ

Internet Explorer opens Edge: How to stop MS Edge redirection Internet Explorer opens Edge: How to stop MS Edge redirection Apr 14, 2023 pm 06:13 PM

It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

Event processing library in PHP8.0: Event Event processing library in PHP8.0: Event May 14, 2023 pm 05:40 PM

Event processing library in PHP8.0: Event With the continuous development of the Internet, PHP, as a popular back-end programming language, is widely used in the development of various Web applications. In this process, the event-driven mechanism has become a very important part. The event processing library Event in PHP8.0 will provide us with a more efficient and flexible event processing method. What is event handling? Event handling is a very important concept in the development of web applications. Events can be any kind of user row

Mozilla is considering introducing vertical tabs to Firefox Mozilla is considering introducing vertical tabs to Firefox Apr 15, 2023 pm 12:10 PM

One thing I like about Microsoft Edge is the option that allows you to access tabs from the sidebar. It looks like Mozilla could add support for vertical tabs in Firefox. The option, introduced in Edge about a year ago, lets you hide the tab bar that usually appears at the top of the window. Enabling this feature creates a sidebar with icons for each tab. Clicking on one of the icons switches to the corresponding tab. So you get the same experience but with a more compact interface. If you expand the side panel, you'll find it's a more efficient way to manage your tabs. Most websites have a lot of white space on either side of the screen and in my opinion a vertical tab bar provides a better experience as it looks

How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page How to cancel the automatic jump to Edge when opening IE in Win10_Solution to the automatic jump of IE browser page Mar 20, 2024 pm 09:21 PM

Recently, many win10 users have found that their IE browser always automatically jumps to the edge browser when using computer browsers. So how to turn off the automatic jump to edge when opening IE in win10? Let this site carefully introduce to users how to automatically jump to edge and close when opening IE in win10. 1. We log in to the edge browser, click... in the upper right corner, and look for the drop-down settings option. 2. After we enter the settings, click Default Browser in the left column. 3. Finally, in the compatibility, we check the box to not allow the website to be reloaded in IE mode and restart the IE browser.

Can mozilla firefox be uninstalled? Can mozilla firefox be uninstalled? Mar 15, 2023 pm 04:40 PM

Mozilla Firefox can be uninstalled; Firefox is a third-party browser and can be uninstalled if it is not needed. Uninstallation method: 1. In the Start menu, click "Windwos System" - "Control Panel"; 2. In the "Control Panel" interface, click "Programs and Features"; 3. In the new interface, find and double-click Firefox Browser icon; 4. In the uninstall pop-up window, click "Next"; 5. Click "Uninstall".

See all articles