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
Vous devez vous connecter pour publier un commentaire.
Il y a deux événements qui gérer ce cas.
La
mouseenter
W3 DOM3 docs etmouseleave
W3 DOM3 docs mais ils sont actuellement dans le DOM3 Événements du projet de travail.Ils ont été mis en place par Microsoft IE5.5, et Firefox a ajouté la prise en charge v10.
Une solution de contournement consiste à vérifier manuellement et d'annuler l'exécution de votre gestionnaire si le nouveau on passe la souris sur l'élément est un enfant de votre haut niveau..
code adapté de http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/
Démo à http://jsfiddle.net/gaby/jMvHv/ (ouvrir votre console pour le journal des messages)
OriginalL'auteur Gabriele Petrioli