Warum funktioniert meine JavaScript-Animationsfunktion im IE, schlägt jedoch in Chrome fehl?

JavaScript-Funktion „Animieren“ schlägt in Chrome trotz Arbeit im IE fehl

Problem:

Eine Animationsfunktion, aufgerufen über Ein Event-Handler-Inhaltsattribut kann in Chrome nicht ausgeführt werden, während es im Internet normal funktioniert Explorer.

Erklärung:

In Chrome wird die globale Animationsfunktion durch das kürzlich in Webanimationen eingeführte Element.prototype.animate überschattet. Diese Schattenbildung entsteht aufgrund des lexikalischen Umgebungsbereichs von Ereignishandlern, der den Bereich des Zielelements gegenüber dem globalen Bereich priorisiert.

Lösung:

Um das Problem zu beheben , können Sie entweder:

• Die Animationsfunktion umbenennen: Einen anderen Namen verwenden, B. animate__, um Verwechslungen mit der Funktion Element.prototype.animate zu vermeiden.

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

• Verwenden Sie die Methode bind(): Binden Sie die Funktion animate an die globales Objekt, um sicherzustellen, dass es immer im globalen Bereich ausgeführt wird.

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine JavaScript-Animationsfunktion im IE, schlägt jedoch in Chrome fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!