Warum funktioniert meine „Animate'-Funktion im IE, aber nicht in Chrome: Ein JavaScript-Shadowing-Problem?

<p>

JS-Funktion „Animate“ schlägt in Chrome fehl, ist aber im IE erfolgreich: Behebung des Shadowing-Problems

Problembeschreibung

<p>Ein onClick-Ereignis mit einer Inline-Funktion namens „animate“, das den Stil eines Elements ändern soll, schlägt in Chrome fehl, funktioniert aber im IE wie vorgesehen. Der in der Funktion „Animieren“ aufgerufene Code zielt darauf ab, die Position und Farbe des Elements mithilfe von JavaScript zu ändern.

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

#demo {
  position: absolute;
}

<p>

Lösung und Erklärung

<p>Das Problem liegt im Anwendungsbereich von JavaScript Ketten- und Abschattungsmechanismus. Wenn das Inline-Event-Handler-Attribut (z. B. onclick) verwendet wird, wird die globale Funktion „animate“ durch die kürzlich eingeführte Methode „Element.prototype.animate“ verdeckt, die aus der Web Animations API stammt.

window.animate // global function

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

<p>Gemäß den DOM-Spezifikationen beschattet die globale Event-Handler-Umgebung den Gültigkeitsbereich des Elements während der Event-Handhabung. Somit hat die „Animieren“-Methode des Elements Vorrang vor der globalen „Animieren“-Funktion.

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).

<p>Um dies zu beheben, kann man mehrere Ansätze anwenden:

1. Benennen Sie das um globale Funktion:

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

2. Binden Sie die globale Funktion an das Ziel Element:

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

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine „Animate'-Funktion im IE, aber nicht in Chrome: Ein JavaScript-Shadowing-Problem?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!