Empêcher l'apparition de la souris lors du survol d'un élément enfant d'un div absolu parent SANS jQuery

Question

J'ai des difficultés avec le onmouseout dans un div positionné de façon absolue. Lorsque la souris touche un élément enfant dans la division, l'événement mouseout se déclenche, mais je ne veux pas qu'il se déclenche tant que la souris n'est pas sortie de la division parent, absolue.

Comment puis-je empêcher le mouseout de se déclencher lorsqu'il touche un élément enfant SANS jquery.

Je sais que cela a quelque chose à voir avec le bouillonnement des événements, mais je n'ai pas réussi à trouver comment résoudre ce problème.

J'ai trouvé un poste similaire ici : Comment désactiver les événements de mouseout déclenchés par les éléments enfants ?

Cependant, cette solution utilise jQuery.

Answer 1

Pour une solution CSS pure plus simple qui fonctionne dans la plupart des cas, on pourrait supprimer les enfants pointer-events en les réglant sur none

.parent * {
     pointer-events: none;
}

Support des navigateurs : IE11+.

Answer 2

function onMouseOut(event) {
        //this is the original element the event handler was assigned to
        var e = event.toElement || event.relatedTarget;
        if (e.parentNode == this || e == this) {
           return;
        }
    alert('MouseOut');
    // handle mouse event here!
}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

J'ai fait une démo rapide en JsFiddle, avec toutes les CSS et HTML nécessaires, regardez-la...

EDIT CORRECTION du lien pour la prise en charge des navigateurs croisés http://jsfiddle.net/RH3tA/9/

NOTE que cela ne vérifie que le parent immédiat, si le div parent a des enfants imbriqués, vous devez d'une manière ou d'une autre parcourir les éléments parents à la recherche de l'"élément originel".

EDIT exemple pour les enfants imbriqués

EDIT Corrigé pour les navigateurs croisés

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}

Et un nouveau JSFiddle , EDIT lien actualisé

Answer 3

Voici une solution plus élégante basée sur ce qui suit. Elle tient compte des événements qui remontent de plus d'un niveau d'enfants. Elle tient également compte des problèmes liés aux navigateurs.

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

Answer 4

Si vous utilisez jQuery, vous pouvez également utiliser la fonction "mouseleave", qui s'occupe de tout cela pour vous.

$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);

do_something se déclenche lorsque la souris entre dans la division cible ou l'un de ses enfants, do_something_else se déclenche uniquement lorsque la souris quitte la division cible et l'un de ses enfants.

Answer 5

Merci à Amjad Masad qui m'a inspiré.

J'ai la solution suivante qui semble fonctionner dans IE9, FF et Chrome et le code est assez court (sans les choses complexes de fermeture et d'enfant transversal) :

    DIV.onmouseout=function(e){
        // check and loop relatedTarget.parentNode
        // ignore event triggered mouse overing any child element or leaving itself
        var obj=e.relatedTarget;
        while(obj!=null){
            if(obj==this){
                return;
            }
            obj=obj.parentNode;
        }
        // now perform the actual action you want to do only when mouse is leaving the DIV
    }