Mouseout et noeud enfant

Résolu/Fermé

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - Modifié le 7 sept. 2019 à 20:00
lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 - 9 sept. 2019 à 06:47

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

A voir également:

Mouseout et noeud enfant
Échec de la tentative de connexion avec « eai_noname - aucun nom de nœud ou de nom de serveur fourni, ou inconnu ». - Forum DNS
Alexa pour enfant - Guide
Gta pour enfant ✓ - Forum Jeux vidéo
L'enfant des ombres résumé par chapitre - Forum Réseaux sociaux
Voiture enfant expo avis - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

lonestar
Modifié le 7 sept. 2019 à 23:20

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

lonestar
Modifié le 7 sept. 2019 à 23:28

note: ça ne marchera que si la souris survole un élément après le mouseout

lamouchetsetse Messages postés 112 Date d'inscription samedi 2 août 2014 Statut Membre Dernière intervention 21 septembre 2021 2
9 sept. 2019 à 06:47

Merci lonestart, ta solution m'a bien inspiré pour faire ce que je voulais.

Discussions similaires

Connaissez vous ce site voitures electriques

un enfant ou une enfant?

Je cherche une police qui imite l'écriture des enfants

l'enfant de mylene farmer

site a eviter pour les enfant?

Discussions similaires

Newsletters