Pourquoi ma fonction JavaScript « animer » fonctionne-t-elle dans IE mais échoue-t-elle dans Chrome ?

La fonction JavaScript « animer » échoue dans Chrome malgré le fonctionnement dans IE

Problème :

Une fonction d'animation, invoquée via un attribut de contenu du gestionnaire d'événements ne parvient pas à s'exécuter dans Chrome, alors qu'il fonctionne normalement sur Internet Explorer.

Explication :

Dans Chrome, la fonction d'animation globale est masquée par Element.prototype.animate récemment introduit dans les animations Web. Cette observation est due à la portée de l'environnement lexical des gestionnaires d'événements, qui donne la priorité à la portée de l'élément cible par rapport à la portée globale.

Solution :

Pour résoudre le problème , vous pouvez soit :

• Renommer la fonction d'animation : Utiliser un nom différent, tel que comme animate__, pour éviter toute confusion avec la fonction Element.prototype.animate.

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

• Utilisez la méthode bind() : Liez la fonction animate au global objet pour garantir qu'il s'exécute toujours dans la portée globale.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!