So kann man feststellen, an welcher Seite die Mouse ein bestimmtes Element verlassen hat.

Für ein Kundenprojekt musste ich eine ziemlich spannende und knifflige Aufgabe meistern. Ich sollte feststellen, ob die Mouse ein bestimmtes HTML-Element auf der oberen Seite verlassen hat und dann eine bestimmte Aktion ausführen. Da ich die Lösung nicht auf Anhieb gefunden habe und etwas suchen musste, habe ich meine Ergebnisse in ein jQuery-Plugin verewigt.

Das Plugin heisst jquery.leave-by-side und steht bei Github zur Verfügung. Grundsätzlich muss man dazu nur mit jQuery das entsprechende Element selektieren und danach Callback-Funktionen übergeben. Diese heissen recht sprechend top, bottom, left und right. Das ganze kann dann z.B. so aussehen:

    $('#element').leaveBySide({
        top: function() {
            console.log('top');
        },
        bottom: function() {
            console.log('bottom');
        },
        right: function() {
            console.log('right');
        },
        left: function() {
            console.log('left');
        }
    });

Wenn man nun über das Element element geht und es über eine bestimmte Seite verlässt, wird in der Javascript-Console die entsprechende Seite ausgegeben.

Natürlich möchte man auch noch auf das eigentliche Element zurückgreifen. Dazu kann man den Callback-Funktionen einfach den Parameter elem übergeben. Dieser wird während der Verarbeitung im Plugin mit dem eigentlichen Element gefüllt. Hier ein Beispiel dafür:

    $('#element2').leaveBySide({
        top: function(elem) {
            elem.css('border-top-color', 'red');
            console.log('top2');
        },
        bottom: function(elem) {
            elem.css('border-bottom-color', 'yellow');
            console.log('bottom2');
        },
        right: function(elem) {
            elem.css('border-right-color', 'blue');
            console.log('right2');
        },
        left: function(elem) {
            elem.css('border-left-color', 'green');
            console.log('left2');
        }
    });

Je nachdem über welche Seite man nun das Element verlässt, wird der Rand in einer anderen Farbe eingefärbt.

Ich habe festgestellt, dass bei sehr schnellen Mausbewegungen das Element mind. 20px in Breite oder Höhe haben sollte – noch besser sind 50px.

Hier nochmal der Link zum Github-Repo: https://github.com/tobias-redmann/jquery.leave-by-side

Wenn der Artikel oder das Plugin hilfreich waren, dann hinterlasst doch einen Kommentar und teilt den Beitrag in den diversen Social-Networks.