.hover() löst auf Eltern mit Kindern ID

Question

Ich versuche, die Mausbewegung meiner Benutzer zu verfolgen, jetzt habe ich den .hover angewandt() Bindung an alle Elemente unter Körper $("body *").hover()

Wenn die Maus gibt ein Element ein, das verschachtelt ist Der "mouseenter" wird so oft ausgelöst wie die übergeordneten Elemente. Das ist in Ordnung für mich, aber mein Problem ist, dass die ID, auf die ich in der Funktion zugreifen kann, immer die des untergeordneten Elements ist.

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/jgyncf3w/1/ Wenn Sie die Maus über die „p-1“ zur gleichen Zeit, dass die divs es in der Konsole „p-1 - in“ gedruckt wird 3 mal. Dies geschieht nicht, wenn Sie sich bereits in einem der Elternelemente befinden, wenn Sie das Kind eingeben.

Das Ändern des Selektors auf $("body") löst mein Problem nicht, da es unerwünschtes Verhalten beim Übergang zwischen untergeordneten Elementen des gleichen übergeordneten Elements erzeugt.

Meine Frage ist, gibt es sowieso das aktuelle Verhalten, aber konnte auf die richtige ID zugreifen?

Answer 1

Sie können das stopPropagation() Methode des Ereignisses das Ereignis stoppen das DOM sprudelt von jedem Elternteil Element werden caputred:

$("body *").hover(function(e) { 
    e.stopPropagation(); 
    if (e.target.id.length > 0) { 
     console.log(e.target.id + " - in"); 
    } 
}, function(e) { 
    e.stopPropagation(); 
    if (e.target.id.length > 0) { 
     console.log(e.target.id + " - out"); 
    } 
}); 

Beachten Sie auch, dass Sie sich auf eine bessere Leistung durch die Verwendung von zwei delegierte Handler bekommen das body und das Element überprüfen, das das Ereignis über die target-Eigenschaft ausgelöst hat, anstatt zwei Ereignishandler auf jedes einzelne Element im DOM anzuwenden. Versuchen Sie folgendes:

$("body").on('mouseenter', '*', function(e) { 
    e.stopPropagation(); 
    if (e.target.id.length) 
     console.log(e.target.id + ' - in'); 
}).on('mouseleave', '*', function(e) { 
    e.stopPropagation(); 
    if (e.target.id.length) 
     console.log(e.target.id + ' - out'); 
}); 

Working example