mouseout et noeud enfant Résolu/Fermé

Question

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:

var ma div = document.getElementById('maDiv'); maDiv.onclick = function() { this.innerHTML = '

'; 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

lonestar · Answer

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='truc bidul'; //'

'; },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);

Mouseout et noeud enfant

1 réponse

Discussions similaires