MouseOver/MouseOut EventListener hériter de nœuds enfants?

Edit: Solution

Grâce à Gaby pour l'aider à trouver une solution! N'a pas bien fonctionné exactement comment je voulais qu'elle, a trouvé une meilleure solution modifié à partir des réponses. Ce que je fais, c'est seulement exécuter le mouseover/mouseout fonctions lorsque les deux éléments (objectif et cibles) ne partagent pas un parent.

Juste modifié Gaby exemple un peu et avoir tout ce travail formidable. Tant que votre pop-up est dans le même élément div que quelle que soit la fraie (même si c'est en dehors de la table des matières, vous pouvez l'ajouter avec trop-plein est visible) et vous n'allez pas entre les éléments partagés sur le chemin, il va rester en vie.

divContents.addEventListener('mouseover', mouseEnter(showPopup, divContents));
divContents.addEventListener('mouseout', mouseEnter(hidePopup, divContents));

Maintenant, la modification de mouseEnter...

function mouseEnter(_fn, _parent) {
    return function(_evt) {
        if(!shareParent(_evt.target, _evt.relatedTarget, _parent)) {
            _fn.call(this, _evt);  
        }
    }
};

function shareParent(_object1, _object2, _parent) {
    if (_object1 === _object2) { 
        return true;
    }
    while (_object1 && _object1 !== _parent) {
        _object1 = _object1.parentNode;
    }
    while (_object2 && _object2 !== _parent) {
        _object2 = _object2.parentNode;
    }

    return _object1 === _object2;
}

Résolu mon problème A-OK, parce que ce que je veux à feu pour mouseover et mouseout les événements vont se produire uniquement lorsque les éléments n'ont pas de parent - exactement comment je comptais sur l'affichage des fenêtres pop-up n'importe comment.

Merci encore pour l'exemple de code à partir de Gaby, si!

REMARQUE: Pas de contrôle d'erreur pour les parents de validité dans shareParent fonction n'ai pas vérifié, mais il doit toujours retourner vrai quand il arrive à la cime des arbres (en supposant que le _parent n'est pas réellement un parent (père ou mère _object1 ou _object2). Donc, assurez-vous que l'objet parent vous passer est valide.

Question D'Origine:

Je vais avoir un problème en JavaScript droit maintenant.

Je suis en train de créer un Élément div qui s'affiche de manière dynamique lorsque quelque chose a un passage de la souris. La div est créé directement à côté de l'objet qu'il engendre.

divCreator.addEventListener('mouseover', createPopup, true);
divCreator.addEventListener('mouseout', hidePopup, true);

Qui crée la fenêtre contextuelle. Maintenant, dans la fenêtre contextuelle, quand je crée, je l'exécute avant que je l'ajouter à la document:

divPopup.addEventListener('mouseover', createPopup, true);
divPopup.addEventListener('mouseout', hidePopup, true);

Cela garantit que, si j'ai passer la souris sur le popup, il le garde en vie (parce que le divCreator mouseout le feu) et quand je mouseout de la fenêtre contextuelle disparaît.

Cependant, avec cette méthode, chaque fois que je souris un élément enfant il détecte un événement mouseout de l'élément parent (divPopup) et ferme la div.

Puis-je rendre les enfants "transparent" à des Événements, pour ainsi dire?

OriginalL'auteur kwh | 2011-12-06