JavaScript の「animate」関数が IE では機能するのに、Chrome では失敗するのはなぜですか?

JavaScript 関数 'animate' が IE で動作しているにもかかわらず Chrome で失敗する

問題:

経由で呼び出された animate 関数イベント ハンドラーのコンテンツ属性は、インターネットでは正常に機能しますが、Chrome では実行に失敗します。 Explorer.

説明:

Chrome では、グローバル アニメーション関数は、Web アニメーションで最近導入された Element.prototype.animate によってシャドウされます。このシャドウイングは、グローバル スコープよりもターゲット要素のスコープを優先するイベント ハンドラーの字句環境スコープが原因で発生します。

解決策:

問題を解決するには

• アニメーションの名前を変更します。 function: Element.prototype.animate 関数との混同を避けるために、animate__ などの別の名前を使用します。

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

• bind() メソッドを使用します。 : animate 関数をグローバル オブジェクトにバインドして、常にグローバル オブジェクト内で実行されるようにします。スコープ。

document.getElementById('demo').addEventListener('click', function() {
  animate().bind(window);
});

以上がJavaScript の「animate」関数が IE では機能するのに、Chrome では失敗するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。