IEとFirefoxブラウザ間のイベント互換性まとめ_JavaScriptスキル

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

1	2
3	4

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

Moz

1	2
3	4

       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);

ただし、これら 2 つのメソッドは Mozilla では使用できません。これらとの互換性を保つために、次のように Dom の insertBefore メソッドが使用されます。
IE&Moz

div1

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

var 要素 = document.createElement("input");

oElement.type = "テキスト"

oDiv.insertBefore(oElement,null);

4、innerHTML と innerText について

innerHTML については IE も Mozilla もサポートしているので問題ありませんが、innerText については IE のみで Moz にはありません

その他の関連記事

JavaScript アプリケーションにおける IE と Firefox の互換性に関するディスカッション
IE と Firefox で JavaScript を記述する 7 つの異なる方法のまとめ
IE の javascript cssと Firefox の差異分析
JS IE と Firefox の互換性コレクション

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：Myriseのすべてのロックを解除する方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7510

15

CakePHP チュートリアル

1378

52

Steamのアカウント名の形式は何ですか

78

11

Win11 Activation Key Permanent

52

19

NYTの接続はヒントと回答です

19

64

もっと見る

Related knowledge

Mozilla Firefox は XPCOM プラグイン ソリューションをロードできません Apr 24, 2023 am 10:22 AM

Mozilla Firefox は、Google Chrome、Safari、Opera などのブラウザ ユーザーのリストで 3 位にランクされています。しかし、Firefox を開いているときにユーザーが「XPCOM をロードできません!」というエラー メッセージを表示することがあります。このエラーにより、Mozilla Firefox をまったく開くことができなくなります。あなたが緊急ソリューションを探しているユーザーの一人であれば、ここは正しい場所です。簡単な解決策 – 1. デバイスを一度再起動してみてください。次に、Firefox を再度開いてみます。 2. インターネット接続を確認します。解決策 1 – Firefox を更新する 何かを行う前に、Firefox を更新してみてください。 1. ⊞Win キー + R を押す必要があります。

Mozilla の Thunderbird 電子メール クライアントが完全に再構築され、新しいバージョン 115 が 7 月にリリースされます Mar 05, 2024 pm 06:52 PM

最近のニュースによると、Mozilla のオープンソース電子メール クライアント Thunderbird は以前ロゴを更新しており、現在そのユーザー インターフェイスが更新されています。 Mozilla は Thunderbird を完全にリファクタリングし、アプリケーションは現在急速に開発されており、ソフトウェア バージョンは 91 から 102 に直接上昇しました。 ▲画像出典 Mozilla Thunderbird ▲画像出典 Mozilla Thunderbird 今年2月、MozillaはメールクライアントThunderbirdの大規模改修プロジェクトを開始するとのプレスリリースを発表した。 2020 年初めから、Thunderbird の開発は Mozilla の子会社である MZ によって行われてきました。

win11でie11ブラウザが使えない場合はどうすればいいですか？ (win11ではIEブラウザは使用できません) Feb 10, 2024 am 10:30 AM

ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか？解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト（管理者）」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。

Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Apr 14, 2023 pm 06:13 PM

Internet Explorer が長い間人気がなくなってきたことは周知の事実ですが、Windows 11 の登場により現実が始まりました。 Edge は、将来的に IE を置き換えるのではなく、現在 Microsoft の最新オペレーティング システムのデフォルトのブラウザーとなっています。現時点では、引き続き Windows 11 で Internet Explorer を有効にすることができます。ただし、IE11 (最新バージョン) の正式な廃止日は 2022 年 6 月 15 日であり、時間は刻々と過ぎています。これを念頭に置くと、Internet Explorer が Edge を開くことがありますが、それが気に入らないことに気づいたかもしれません。では、なぜこのようなことが起こっているのでしょうか?存在する

PHP8.0のイベント処理ライブラリ：イベント May 14, 2023 pm 05:40 PM

PHP8.0 のイベント処理ライブラリ: Event インターネットの継続的な発展に伴い、PHP は人気のバックエンド プログラミング言語として、さまざまな Web アプリケーションの開発に広く使用されています。このプロセスでは、イベント駆動のメカニズムが非常に重要な部分になっています。 PHP8.0 のイベント処理ライブラリ Event は、より効率的で柔軟なイベント処理メソッドを提供します。イベント処理とは何ですか? イベント処理は、Web アプリケーションの開発において非常に重要な概念です。イベントは任意の種類のユーザー行にすることができます

MozillaはFirefoxに垂直タブを導入することを検討している Apr 15, 2023 pm 12:10 PM

Microsoft Edge で私が気に入っている点の 1 つは、サイドバーからタブにアクセスできるオプションです。 Mozilla が Firefox に垂直タブのサポートを追加する可能性があるようです。約1年前にEdgeに導入されたこのオプションを使用すると、通常はウィンドウの上部に表示されるタブバーを非表示にすることができます。この機能を有効にすると、各タブのアイコンを含むサイドバーが作成されます。いずれかのアイコンをクリックすると、対応するタブに切り替わります。したがって、同じエクスペリエンスを、よりコンパクトなインターフェイスで得ることができます。サイド パネルを展開すると、タブをより効率的に管理できることがわかります。ほとんどの Web サイトには画面の両側に多くの空白があり、私の意見では、垂直タブ バーのほうが見た目に優れたエクスペリエンスを提供します。

mozilla Firefox はアンインストールできますか? Mar 15, 2023 pm 04:40 PM

Mozilla Firefox はアンインストールできます。Firefox はサードパーティのブラウザなので、不要な場合はアンインストールできます。アンインストール方法: 1. [スタート] メニューで、[Windwos システム] - [コントロール パネル] をクリックします; 2. [コントロール パネル] インターフェイスで、[プログラムと機能] をクリックします; 3. 新しいインターフェイスで、[プログラムと機能] をクリックします。 Firefox ブラウザ アイコン; 4. アンインストール ポップアップ ウィンドウで、[次へ] をクリックします; 5. [アンインストール] をクリックします。

Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Mar 20, 2024 pm 09:21 PM

最近、多くの win10 ユーザーが、コンピューターのブラウザーを使用するときに、IE ブラウザーが常に自動的にエッジ ブラウザーにジャンプすることに気付きました。このサイトでは、win10でIEを開いたときに自動的にエッジにジャンプして閉じる方法をユーザーに丁寧に紹介しましょう。 1. Edge ブラウザにログインし、右上隅にある [...] をクリックして、ドロップダウン設定オプションを探します。 2. 設定を入力したら、左側の列の「デフォルトのブラウザ」をクリックします。 3. 最後に、互換性で、Web サイトが IE モードで再ロードされないようにチェックボックスをオンにし、IE ブラウザを再起動します。

See all articles