• onMouseLeave - Workaround mit onmouseover

    Viele verzweifeln daran: ein eigenwilliges onmouseout, hier onmouseleave genannt. Falsche onmouseout-events

    Man hat eine fixe DIV-Box mit diversen Inhalten und will im Bezug auf die gesamte Box ein onmouseleave haben. Man codet also die Box, fügt hier und da ein paar Links ein und stellt am Ende fest, dass wenn man der Box ein onmouseout-Event zuweist, dass man nicht nur ausserhalb, also rund herum, das Event getriggert bekommt, sondern auch, wenn man innerhalb der Box ein anderes Element berührt. Das passiert, wenn man für diesen Zweck falsch gecodet hat. Da auch ich jedoch nicht nochmal von vorne anfangen wollte, um das Problem anders anzugehen, habe ich mir einen sehr sinnvollen Workaround erstellt, den ich bisher so noch nirgends gesehen habe und mit euch teilen möchte.

    Die Überlegung war: Wenn ich nicht korrekt prüfen kann ob die Maus tatsächhlich auf dem Element ist, so muss ich prüfen, wann die Maus definitiv ausserhalb des Elements ist und das mache ich mit einem onmouseover. Wie? Das zeige ich euch jetzt.

    Zu allererst geben wir der DIV_BOX ein

    1
2

    position:relative;
/** top:0; left:0; **/ /** bei Bedarf **/

    das ändert definitiv nichts an ihrer jetzigen Position, wenn die Box eurer Wahl ein ganz “normales” Umlaufelement ist. Wenn die Box ein

    1

    position:absolute;

    hat, dann ist das natürlich genausogut verwertbar. Nun geben wir unserer DIV-Box einen Z-Index, der  größer als 1 ist, denn wir brauchen Puffer nach unten und der (-1)-Index ist nicht wirklich verwertbar ;). Nun kommen wir zum Trick der Sache: Wir bauen ein HTML-Element, das absolut positioniert ist, die Breite 100% hat und sich auch in der Höhe über eine möglichst große Fläche (100%) erstreckt. Dieses Element wird jedoch mit einem niedrigeren Z-Index versehen, als unsere DIV-Box. Das bedeutet, dass dieses Framer-Element sich überall erstreckt und das einzige Element, das den Kontakt mit dem Framer-Element verhindert ist unsere DIV-Box. Wenn also der onmouseover bei unserem Framer-Element greift, können wir sicher sein, dass wir ausserhalb unserer DIV-Box sind - clever oder?

    Wem das zu kompliziert war, hier eine bildliche Darstellung.

    Framer-Workaround

    Das blaue stellt natürlich, unschwer zu erkennen, den Framer dar. Dem gibt man nun ein onmouseover und hat damit sein ehemaliges onmouseleave. Aber halt, eine Sache fehlt noch: Diesen Framer müsst ihr natürlich noch entfernen während der Laufzeit der Webseite, solange er nicht benötigt wird, denn sonst blockiert er ja alle Elemente darunter.

    Wir müssen ihn also starten / display:block  und müssen ihn dann beim eigenen onmouseover wieder schließen. Das sieht dann so aus:

    1
2

    <div id="MouseOutFramer" onmouseover="Controller.DIV_Box_MouseOut()"></div>
<div id="DIV_Box" onmouseover="Controller.showFramer()"></div>
    1
2
3
4
5
6
7
8
9
10
11
12

    Controller = {
 DIV_Box_MouseOut: function(){
  //your mouseout functionality
  this.closeFramer();
 },
 showFramer: function(){
   document.getElementById('MouseOutFramer').style.display='block';
 },
 closeFramer: function(){
   document.getElementById('MouseOutFramer').style.display='none';
 }
};

    Das war’s, Puh, geschafft. Viel Inhalt für eine recht simple, aber effektive Technik. Feedback ist natürlich wie immer erwünscht v.a. in diesem Fall würde ich gern wissen, ob ich der erste bin, der diese geniale Idee hatte ;).

    geschrieben am 04.08.2009
    Archiviert unter: Entwicklung
    » Kommentare «

Eine Antwort hinterlassen