Modifier attribut onclick via le DOM

28 nov. 2005, 10:29

Bonjour,
je me heurte à un problème de compatibilité avec IE. Je veux modifier dynamiquement la valeur d'un attribut "onclick" via le DOM. Ça fonctionne parfaitement bien avec FireFox ou Opera, mais IE reste étanche aux modifications et mes fouilles de la doc depuis deux jours ne me mènent nulle part. Je n'ai probablement pas cherché au bon endroit, peut-être l'un d'entre vous saura m'indiquer la bonne piste ?

Exemple pratique:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
    <title>Modifier un évènement onclick via le DOM</title>
    <meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
    <script type="text/javascript">
    /* <![CDATA[ */
    <!--
    function autrelien()
    {
       document.getElementById("lien_phpfrance").href = "http://www.phpfrance.com/forums/";
       document.getElementById("lien_phpfrance").setAttribute("onclick", "alert('Ce lien pointe vers les forums du site');");
       document.getElementById("lien_phpfrance").firstChild.nodeValue = "Les forums de PHPFrance";
    }
    //-->
    /* ]]> */
    </script>
  </head>
  <body>
    <p><a id="lien_phpfrance" href="http://www.phpfrance.com/" onclick="alert('Ce lien pointe vers le site.');">PHPFrance</a><br>
    <a href="javascript:autrelien()">Autre lien!</a></p>
  </body>
</html>

Ceci affiche une page avec deux lien. À la base, le premier pointe sur le site de PHPFrance, mais en cliquant sur le second, je modifie le texte du lien et la cible en le faisant pointer vers les forums de PHPFrance. Cette partie fonctionne très bien. En revanche, si vous regardez la fonction, j'essaye également de modifier la valeur du gestionnaire d'évènement onclick et si ça fonctionne parfaitement avec Firefox, IE semble perdre tout simplement la valeur de l'attribut.

Note : le ": de l'exemple de code est en réalité un ":" que le script du forum a modifié.

28 nov. 2005, 12:05

Bon, ben j'ai fini par trouver : Il se trouve que c'est un un bug propre à IE, Microsoft essayant de forcer l'utilisation d'une méthode propriétaire attachEvent. Pour contourner le problème, voici la solution, le même script modifié foncitonnel partout:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
    <title>Modifier un évènement onclick via le DOM</title>
    <meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
    <script type="text/javascript">
    /* <![CDATA[ */
    <!--
    function autrelien()
    {
       document.getElementById("lien_phpfrance").href = "http://www.phpfrance.com/forums/";
       document.getElementById("lien_phpfrance").onclick = function(){alert('Ce lien pointe vers les forums du site');};
       document.getElementById("lien_phpfrance").firstChild.nodeValue = "Les forums de PHPFrance";
    }
    //-->
    /* ]]> */
    </script>
  </head>
  <body>
    <p><a id="lien_phpfrance" href="http://www.phpfrance.com/" onclick="alert('Ce lien pointe vers le site.');">PHPFrance</a><br>
    <a href="javascript:autrelien()">Autre lien!</a></p>
  </body>
</html>

Notez dans la fonction autrelien() la seconde instruction : on pointe directement sur la propriété onclick pour déclencher une fonction définie avec l'évènement qu'on veut utiliser.

Merci quand même à ceux qui se sont penché sur mon problème.

Modifier attribut onclick via le DOM

Qui est en ligne