Mouseout et noeud enfant [Résolu]

Messages postés
63
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
9 septembre 2019
-
Bonjour, je rencontre un pti souci qui j'en suis sur est déjà bien connu, mais je ne trouve pas de solutions.

Voici le problème, j'ai une div matérialise par un carré sur ma page. Lorsque l'on click dessus, elle ce remplis avec une liste qui contient des liens de navigation.

j'ai un autre évènement mouseout qui lorsque l'on quitte la div, elle ce vide pour retrouver son état initial.

Le problème est que lorsque l'on click sur un lien qui est un nœud enfant de la div ça me déclenche le mouseout et non le lien.

Je sais que c'est le comportement naturel de cet évènement, mais j'aimerais qu'il ne soit pas déclenché quand je click sur un nœud enfant de ma div.

Un pti bou de code pour schématiser la chose:

<div id="maDiv"></div>


var ma div = document.getElementById('maDiv');

maDiv.onclick = function()
{
    this.innerHTML = '<ul><li><a href="truc.php">truc</a></li><li><a href="bidul.php">bidul</a></li></ul>';

    this.onmouseout = function()
    {
        this.innerHTML = '';
    };
};


Voila, comme je l'ai dis plus haut, quand je click sur un lien ça m'efface ma liste au lieu d’exécuter le lien.

Merci beaucoup pour votre aide. A bientôt bise.


Configuration: Linux / Firefox 69.0
Afficher la suite 

1 réponse

Meilleure réponse
1
Merci
Bonsoir,
je ne sais pas si c'est bien connu en tout cas ce n'est pas ergonomique ce que vous faites et ça complique les choses au niveau du code pour pas grand chose. Donc à éviter ;)

En testant votre code(incomplet d'ailleurs) on réalise rapidement que lorsque que l'on survole un autre élément cela compte comme une sortie de 'maDiv'.
Voici une petite astuce que j'ai trouvé ... mais comme j'ai déjà dit il y a certainement plus simple et plus ergonomique, de préférence éviter ce genre de truc qui serve à rien parce que complique et rend le code super lourd pour que dalle...à vous de voir:



function createLink(ref,txt){let a =document.createElement('a');a.href=ref;a.innerHTML=txt;return a;}
document.getElementById('maDiv').addEventListener('click',function()
{
    document.getElementById('maDiv').appendChild(createLink('bidul.php', 'bidul'));//-- j'ai fait ça pour voir si même comportement qu'avec un texte HTML
    document.getElementById('maDiv').appendChild(createLink('truc.php', 'truc'));
 //   document.getElementById('maDiv').innerHTML='<a href="truc.php">truc</a><a href="bidul.php">bidul</a>';
 //'<ul><li><a href="truc.php">truc</a></li><li><a href="bidul.php">bidul</a></li></ul>';

},false);
document.getElementById('maDiv').addEventListener('mouseout',function()
    {
  document.addEventListener('mouseover',function(e){
  
   if(this.parentNode != document.getElementById('maDiv')){
   this.innerHTML = '';
   
   //-- donc ici je teste si l'élément parent est maDiv pour effacer sinon j'efface pas
  //-- notez que j'ai supprimé ul et li sinon le teste est this.parentNode.parentNode.parentNode != document.getElementById('maDiv')
  //-- quand je disais c'est lourd pour ue dalle...enfin en mettant une classe aux 'li' on peut écrire plus court genre :
  // this.parentNode.className !='maClasse'
   }});
  
    },false);



Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 59967 internautes nous ont dit merci ce mois-ci

note: ça ne marchera que si la souris survole un élément après le mouseout
lamouchetsetse
Messages postés
63
Date d'inscription
samedi 2 août 2014
Statut
Membre
Dernière intervention
9 septembre 2019
1 -
Merci lonestart, ta solution m'a bien inspiré pour faire ce que je voulais.
Commenter la réponse de lonestar