11484 sujets

JavaScript, DOM et API Web HTML5

Problème entre focus et blur initiés par addEventListener()

Bonjour à tous.

Je m'inscris spécialement sur ce forum pour essayer de trouver une solution au problème que je vais vous soumettre : j'y ai si souvent, en tant que visiteur, glané des informations utiles... Permettez-moi, pour cela, de vous remercier !
Je suis actuellement en train de construire mon site. Le projet est déjà bien avancé.
Je précise que c'est à des fins d'exercices, afin de parfaire mes connaissances en JavaScript sur certains points précis, que je me suis embarqué dans l'écriture d'un script pour gérer des rollovers.
J'ai isolé et simplifié au mieux le morceau de code qui pose problème : à l'exécution, il ressort un 'conflit' entre le focus et le blur…
Si le premier lien du 'menu_horizontal' reçoit le focus, grâce à la touche tabulation, il le perd immédiatement, pour une raison qui m'échappe, au profit du blur… Et le code entame une boucle infinie
Quelqu'un aurait-il une idée qui pourrait me mettre sur la piste d'une solutions ?
Petite précision : le problème ne se pose pas avec mouseover, click et mouseout.
Merci, par avance, du temps que vous m'accorderez...


<!DOCTYPE html>
<html lang="">     
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>     
     <style>
           /* Ces couleurs ne sont pas celles de mon site  [smile] !*/ 
          body{background-color: #000000; color: #ffffff;}
          .link_1 {color: red; }
          .visited_1 {color: aliceblue; }
          .hover_1 {color: yellow; }
          .focus_1 {color: aqua; }
          .active_1 {color: blue; } 
          .link_2 {color: white; }
          .visited_2 {color: red; }
          .hover_2 {color: blue; }
          .focus_2 {color: green; }
          .active_2 {color: orange; }
     </style>
</head>
<body>
     <div id="">
          <nav id="menu_horizontal">
               <ul>
                    <li><a href="http://www.1.com/" id="item_menu_horizontal_01" class="active_1">Lien 1</a><br/></li>
                    <li><a href="http://www.2.com/" id="item_menu_horizontal_02" class="link_1">Lien 2</a><br/></li>
                    <li><a href="http://www.3.com/" id="item_menu_horizontal_03" class="link_1">Lien 3</a><br/></li>
               </ul>
          </nav>
          <p></p>
          <nav id="menu_vertical" name="menu_vertival" class="" style="">
               <ul>
                    <li><a href="http://www.A.com" id="item_menu_vertical_01" class="active_2">Lien 1</a><br/></li>
                    <li><a href="http://www.B.com" id="item_menu_vertical_02" class="link_2">Lien 2</a><br/></li>
                    <li><a href="http://www.C.com" id="item_menu_vertical_03" class="link_2">Lien 3</a><br/></li>
                    <li><a href="http://www.D.com" id="item_menu_vertical_04" class="link_2">Lien 4</a><br/></li>
               </ul>
          </nav>         
          
          <script type="text/javascript" language="javascript"src="scripts/script.js"></script>
     </div>
</body>
</html>




var ids_des_liens = new Array();
ids_des_liens [0] = ("item_menu_horizontal_01");
ids_des_liens [1] = ("item_menu_horizontal_02");
ids_des_liens [2] = ("item_menu_horizontal_03");
ids_des_liens [3] = ("item_menu_vertical_01");
ids_des_liens [4] = ("item_menu_vertical_02");
ids_des_liens [5] = ("item_menu_vertical_03");
ids_des_liens [6] = ("item_menu_vertical_04");

for (var compteur = 0; compteur < ids_des_liens.length; compteur++) {     
          
     var lien = document.getElementById(ids_des_liens[compteur]);
     
     lien.addEventListener("focus", function() {
          
          var item_actif = this.getAttribute("id");                   
          var starter = "focus";
          
          alert("focus");
          
     } );
               
     lien.addEventListener("blur", function() {

          var item_actif = this.getAttribute("id");                     
          var starter = "blur";
          
          alert("blur");
          
     } );
     
}
salut,

à première vue je dirais que c'est à cause de alert("..."). Quand la fonction fait apparaître un message, ton élément perd le focus.
Tu devrais utiliser plutôt la console pour ce genre de vérifications.
Bonjour Quintessence,

pour compléter ce que dit Zelalsan (au cas ou) c'est :
console.log(Valeur)
Je sais que c'est pour t'exercer mais généralement le rollovers c'est avec mouseenter et mouseleave
Sujet clos
Aller à