「animate」関数が IE では動作するのに Chrome では動作しないのはなぜですか: JavaScript シャドウイングの問題ですか?

JS 関数 'Animate' が Chrome では失敗するが IE では成功: シャドウイングの問題の解決

問題の説明

インライン関数を使用した onClick イベント要素のスタイルを変更するように設計された「animate」という名前のファイルは、Chrome では失敗しますが、IE では意図したとおりに機能します。 「animate」関数内で呼び出されるコードは、JavaScript を使用して要素の位置と色を変更することを目的としています。

function animate() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

#demo {
  position: absolute;
}

<p></p>

解決策と説明

問題は JavaScript のスコープにあります。チェーンとシャドウイングのメカニズム。インライン イベント ハンドラー属性 (onclick など) が使用される場合、グローバル関数 'animate' は、Web アニメーション API から派生した最近導入された 'Element.prototype.animate' メソッドによって隠蔽されます。

window.animate // global function

Element.prototype.animate // element's own method

DOM 仕様によれば、グローバル イベント ハンドラー環境は、イベント処理中に要素のスコープをシャドウします。したがって、要素の 'animate' メソッドは、グローバル 'animate' 関数よりも優先されます。

10. Let the current event handler value be the result of the following steps:
    ...
    4. Let the target environment be the lexical environment scope.
    ...
    6. If the element is non-null, then
        a. Let the target environment be the result of NewObjectEnvironment(the element, the target environment).

これを修正するには、いくつかの方法を使用できます。

1. 名前を変更します。グローバル関数:

function animate__() {
  var div = document.getElementById('demo');
  div.style.left = "200px";
  div.style.color = "red";
}

2. グローバル関数を対象要素:

document.getElementById('demo').addEventListener('click', animate.bind(document.getElementById('demo')));

以上が「animate」関数が IE では動作するのに Chrome では動作しないのはなぜですか: JavaScript シャドウイングの問題ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。