Pourquoi ma fonction « animer » fonctionne-t-elle dans IE mais pas dans Chrome : un problème d'observation JavaScript ?

<p>

La fonction JS « Animate » échoue dans Chrome mais réussit dans IE : résolution du problème d'observation

Description du problème

<p>Un événement onClick avec une fonction en ligne nommé « animer », conçu pour modifier le style d'un élément, échoue dans Chrome mais fonctionne comme prévu dans IE. Le code invoqué dans la fonction 'animate' vise à modifier la position et la couleur de l'élément à l'aide de JavaScript.

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

#demo {
  position: absolute;
}

<p>

Solution et explication

<p>Le problème réside dans la portée de JavaScript chaîne et mécanisme d'ombrage. Lorsque l'attribut du gestionnaire d'événements en ligne (par exemple, onclick) est utilisé, la fonction globale « animer » est obscurcie par la méthode « Element.prototype.animate » récemment introduite, qui découle de l'API Web Animations.

window.animate // global function

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

<p>Selon les spécifications DOM, l'environnement global du gestionnaire d'événements masque la portée de l'élément lors de la gestion des événements. Ainsi, la méthode 'animer' de l'élément prime sur la fonction globale 'animer'.

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>Pour remédier à cela, on peut employer plusieurs approches :

1. Renommer l'élément fonction globale :

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

2. Lier la fonction globale à la cible élément :

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

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!