JavaScript の「animate」関数が Chrome では動作しないのに、IE では動作するのはなぜですか?

JS 関数 animate は Chrome では機能しませんが、IE では機能します

提供された JavaScript 関数 animate は Chrome では機能しませんが、Internet Explorer では期待どおりに動作します。この問題に対処するには、イベント ハンドラーのコンテンツ属性を使用するときに発生する制約と潜在的な競合を詳しく調べる必要があります。

問題の核心は、Element.prototype によるグローバル関数 window.animate のシャドウイングに起因します。 .アニメイト。 Web アニメーションで導入されたこの新しい関数は、Element インターフェイスを拡張し、次の方法で要素上で直接アニメーションを有効にします:

elem.animate({ color: 'red' }, 2000);

コンテンツ属性を使用してイベントを処理する場合、ターゲット要素のスコープはグローバル スコープをオーバーライドします。 。したがって、関数名 animate は新しいメソッド Element.animate と競合します。

この問題を解決するには、次の 2 つの方法が考えられます:

1. 関数の名前を変更します:

関数の名前を変更することで、次の関数との競合を回避できます。要素.プロトタイプ.アニメーション。たとえば、次のように使用できます:

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

2. apply メソッドを使用します:

または、apply メソッドを使用して明示的に指定することもできます。アニメーション関数の正しいスコープ。この方法は、animate という名前を維持する必要がある場合に特に便利です。

コードを次のように変更します。

document.getElementById('demo').onclick = function() {
  animate.apply(document.getElementById('demo'));
};

この行は、によってトリガーされたときに、グローバル animate 関数に正しいスコープを適用します。 onclick イベント。

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