Warum funktioniert meine JavaScript-Animationsfunktion nicht in Chrome, sondern im IE?

JS-Funktion animate funktioniert nicht in Chrome, aber im IE

Die bereitgestellte JavaScript-Funktion animate funktioniert nicht in Chrome, funktioniert aber wie erwartet im Internet Explorer . Um dieses Problem anzugehen, ist es notwendig, sich mit den Einschränkungen und potenziellen Konflikten zu befassen, die bei der Verwendung von Event-Handler-Inhaltsattributen auftreten.

Der Kern des Problems liegt in der Beschattung Ihrer globalen Funktion window.animate durch Element.prototype .animieren. Diese neue Funktion, die in Web Animations eingeführt wurde, erweitert die Elementschnittstelle und ermöglicht Animationen direkt auf Elementen auf folgende Weise:

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

Bei der Verarbeitung von Ereignissen mithilfe von Inhaltsattributen überschreibt der Bereich des Zielelements den globalen Bereich . Daher steht Ihr Funktionsname animate in Konflikt mit der neuen Methode Element.animate.

Um dieses Problem zu beheben, gibt es zwei mögliche Ansätze:

1. Benennen Sie Ihre Funktion um:

Indem Sie den Namen Ihrer Funktion ändern, können Sie den Konflikt mit Element.prototype.animate vermeiden. Beispielsweise könnten Sie Folgendes verwenden:

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

2. Verwenden Sie die apply-Methode:

Alternativ können Sie die apply-Methode verwenden, um explizit anzugeben den richtigen Bereich für Ihre Animationsfunktion. Dieser Ansatz ist besonders nützlich, wenn Sie den Namen animate beibehalten müssen.

Ändern Sie Ihren Code wie folgt:

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

Diese Zeile wendet den richtigen Bereich auf Ihre globale Animate-Funktion an, wenn sie durch ausgelöst wird das Onclick-Ereignis.

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