IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

addEventListener qui ne doit pas réagir aux evenements des fils d'un noeuds


Sujet :

JavaScript

  1. #1
    Membre chevronné
    Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2008
    Messages
    504
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2008
    Messages : 504
    Par défaut addEventListener qui ne doit pas réagir aux evenements des fils d'un noeuds
    Bonjour,

    Voilà, sur un petit système de div-popup, je veux proposer dans la méthode qui créé la popup de mettre en parametre une fonction callback qui sera exécutée à la fermeture de ce popup (div).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function RequestHTMLPopup(param, close_callback)
    {
    	popup = MkPopup(); // fonction qui construit dynamiquement le DIV
    	popup.innerHTML = AjaxHTML(param);
    	popup.parentNode.addEventListener('DOMNodeRemoved', close_callback, false);
    }
    Dans les fait, le MkPopup, c'est du document.createElement('div') de la div principale plus une petite croix à droite pour fermer la popup, et une div qui contient le contenu a proprement parler (c'est cet sous div qui est retournée par MkPopup d'ailleurs).

    on a un gros
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
       <DIV>
          <DIV>petite croix clozdiv</DIV>
          <DIV>contenu</DIV>
       </DIV>
    MkPopup retourne la DIV abritant le contenu, et pour la petite croix de fermeture de la page, j'ai définis:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    clozdiv.onclick = function(e) {
    window.document.body.removeChild(this.parentNode);
    };
    De cette façon, quand je détruit ma popup, ça lache un evenement DOMNodeRemoved, et le callback de fermeture est appelé. Notez que ce callback ne doit en aucun cas contenir du code relatif à la gestion de la popup, comme par exemple un stopPropagation().

    Bref, tout ça marche pas mal, jusqu'au moment où dans la div de contenu, je doive manipuler mes objets. Genre un simple obj.innerHTML =... semble propager un DOMNodeRemoved (probablement due à la suppression de ce qu'il y avait deja dans l'objet) qui remonte jusqu'au DIV de la popup, et donc déclanche l'execution du callback.

    Auriez vous une solution pour que le mon eventlistener ne réagisse uniquement qu'à l’événement DOMNodeRemoved le concernant lui, et non ceux venant de ses fils ?

    En vous remerciant

  2. #2
    Membre actif Avatar de Ethan 0x21
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Août 2006
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Août 2006
    Messages : 120
    Par défaut
    Bonsoir,

    Pourquoi ne stoppez vous donc pas la propagation/remontée des bulles au niveau de votre div de contenus, avant que cela n'atteigne la div principale et donc n'invoque la callback ?

    J'ai du mal à saisir,

    Cdt

  3. #3
    Membre chevronné
    Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2008
    Messages
    504
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2008
    Messages : 504
    Par défaut
    J'ai trouvé, j'ai rajouté un :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    popup.addEventListener('DOMNodeRemoved', function(e) {e.stopPropagation();}, false);
    avant la ligne

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    popup.parentNode.addEventListener('DOMNodeRemoved', close_callback, false);
    ca qui permet de bloquer la remonter de cet evenement.

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Juste une remarque : il est très fortement déconseillé pour des raisons de performance d'utiliser les Mutation Events (dont fait partie DOMNodeRemoved).

    D'autant que dans ce que tu décris, cela n'a aucune utilité !
    Pas besoin d'observer la suppression de la popup de cette manière : tu sais qu'elle a été supprimée lorsque tu fais le removeChild, donc tu peux placer le code lié à la suppression à ce moment là !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre chevronné
    Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2008
    Messages
    504
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Décembre 2008
    Messages : 504
    Par défaut
    J'en prend bonne note, merci !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [script.aculo.us] Draggable qui ne doit pas quitter le parent
    Par Arnaud F. dans le forum Bibliothèques & Frameworks
    Réponses: 3
    Dernier message: 08/07/2009, 17h18
  2. Fond musical qui ne doit pas s'arreter lorsque la page se recharge
    Par xergio dans le forum Balisage (X)HTML et validation W3C
    Réponses: 55
    Dernier message: 19/12/2007, 03h33
  3. Réponses: 5
    Dernier message: 24/10/2007, 16h45
  4. Problème de addEventListener qui ne fonctionne pas avec un attachMovie
    Par jeremie74 dans le forum ActionScript 1 & ActionScript 2
    Réponses: 1
    Dernier message: 27/09/2007, 10h47
  5. lien pour une table qui ne doit pas etre public
    Par raslain dans le forum Oracle
    Réponses: 1
    Dernier message: 12/12/2005, 13h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo