Diese Woche möchte ich einen kleinen Ausflug in die Welt der Event-Handler machen.
Kennt ihr die Unterschiede zwischen den beiden Event-Handlern onMouseOut und onMouseLeave? Grade wenn ihr mit selbstgemachten Popups (o.Ä.) arbeitet werdet ihr ggf. über ein bestimmtes Problem gestolpert sein…

Stellt euch ein Popup DIV vor, welches bei klick geöffnet und bei onMouseOut geschlossen werden soll:

<div id="click">Hier klicken</div>
<div id="popup">
    <h2>Popup Headnline</h2>
    <p>Popup Text</p>
</div>

// jQuery/Zepto Code
$('#click').click(function() {
    $('#popup').show();
});

$('#popup').mouseout(function() {
    $('#popup').hide();
});

// Prototype Code
$('click').on('click', function() {
    $('popup').show();
});

$('popup').on('mouseout', function() {
    $('popup').hide();
});

Wenn ihr also auf „Hier klicken“ klickt, wird das Popup geöffnet. Geschlossen wird es, wenn ihr mit der Maus über das DIV fahrt und es wieder verlasst. Alles funktioniert wie es soll – oder?
Fahrt ihr innerhalb des Popups über ein weiteres HTML-Element (Im Beispiel h2 oder p) wird es geschlossen obwohl ihr das Popup nicht verlassen habt! onMouseOut wird also selbst dann aktiv wenn ein Kind-Elemente mit der Maus berührt wird (denn dadurch verlasst ihr die Ebene des eigentlichen Popup-DIV und hovert über ein anderes HTML Element). Das ist natürlich nicht das gewünschte Verhalten – Genau hier kommt onMouseLeave ins Spiel!

Bei onMouseLeave können Kind-Elemente mit der Maus berührt werden ohne das Event auszulösen – onMouseLeave wird tatsächlich erst dann abgefeuert, wenn das eigentliche Popup-Element (inkl. Kind-Elemente) verlassen wird.

Eine ausführlichere Erklärung zum so genannten „Event bubbling“ so wie einige praktische Beispiele zu diesen Events findet ihr auf der englischen Seite: mkyong.com.

Ich wünsche eine erfolgreiche und sonnige Woche!