it-swarm.com.de

Wie kann ich erkennen, wann die Maus das Fenster verlässt?

Ich möchte in der Lage sein zu erkennen, wann die Maus das Fenster verlässt, so dass ich keine Ereignisse auslösen kann, während sich die Maus des Benutzers anderswo befindet.

Irgendwelche Ideen, wie das geht?

74
Matt

Diese Art von Verhalten ist normalerweise beim Implementieren des Drag-Drop-Verhaltens auf einer HTML-Seite erwünscht. Die folgende Lösung wurde auf IE 8.0.6, FireFox 3.6.6, Opera 10.53 und Safari 4 auf einem MS Windows XP - Computer getestet.
Zuerst eine kleine Funktion von Peter-Paul Koch; Browserübergreifender Ereignishandler:

function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

Verwenden Sie dann diese Methode, um einen Event-Handler an das Mouseout-Ereignis von Document Objects anzuhängen:

addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        // stop your drag event here
        // for now we can just use an alert
        alert("left window");
    }
});

Zum Schluss noch eine HTML-Seite mit dem Skript zum Debuggen:

<html>
<head>
<script type="text/javascript">
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
addEvent(window,"load",function(e) {
    addEvent(document, "mouseout", function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == "HTML") {
            // stop your drag event here
            // for now we can just use an alert
            alert("left window");
        }
    });
});
</script>
</head>
<body></body>
</html>
91
J Mills

Wenn Sie jQuery verwenden, wie wäre es dann mit diesem kurzen und süßen Code -

$(document).mouseleave(function () {
    console.log('out');
});

Dieses Ereignis wird ausgelöst, wenn sich die Maus nicht wie gewünscht auf Ihrer Seite befindet. Ändern Sie einfach die Funktion so, wie Sie möchten.

Und Sie könnten auch verwenden:

$(document).mouseenter(function () {
    console.log('in');
});

Auslösen, wenn die Maus wieder auf die Seite wechselt.

Quelle: https://stackoverflow.com/a/16029966/895724

37
Mandeep Janjua

Das funktioniert für mich:

addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});
24
user1084282

Um das Mauseleave zu erkennen, ohne die Bildlaufleiste und das Autovervollständigungsfeld zu berücksichtigen, oder prüfen Sie Folgendes:

document.addEventListener("mouseleave", function(event){

  if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight))
  {

     console.log("I'm out");

  }
});

Bedingungen Erklärungen:

event.clientY <= 0  is when the mouse leave from the top
event.clientX <= 0  is when the mouse leave from the left
event.clientX >= window.innerWidth is when the mouse leave from the right
event.clientY >= window.innerHeight is when the mouse leave from the bottom
6
Daphoque

Keine dieser Antworten funktionierte für mich. Ich benutze jetzt:

document.addEventListener('dragleave', function(e){

    var top = e.pageY;
    var right = document.body.clientWidth - e.pageX;
    var bottom = document.body.clientHeight - e.pageY;
    var left = e.pageX;

    if(top < 10 || right < 20 || bottom < 10 || left < 10){
        console.log('Mouse has moved out of window');
    }

});

Ich verwende dies für ein Widget zum Hochladen von Dateien per Drag & Drop. Es ist nicht absolut genau, es wird ausgelöst, wenn sich die Maus in einem gewissen Abstand vom Fensterrand befindet.

5
Emmanuel

Ich nehme zurück, was ich gesagt habe. Es ist möglich. Ich habe diesen Code geschrieben, funktioniert einwandfrei.

window.onload = function() {

    $span = document.getElementById('text');

    window.onmouseout = function() {
        $span.innerHTML = "mouse out";  
    }

    window.onmousemove = function() {
        $span.innerHTML = "mouse in";   
    }

}

arbeitet in chrom, firefox, oper. Aint in IE getestet, aber davon ausgehen, dass es funktioniert.

bearbeiten. IE verursacht wie immer Probleme. Damit es im IE funktioniert, ersetzen Sie die Ereignisse vom Fenster zum Dokument:

window.onload = function() {

    $span = document.getElementById('text');

    document.onmousemove = function() {
        $span.innerHTML = "mouse move";
    }

    document.onmouseout = function() {
        $span.innerHTML = "mouse out";
    }

}

kombinieren Sie sie für die Crossbrowser-Kick ass-Cursorerkennung o0: P

3
Ozzy

Ich habe alles oben ausprobiert, aber nichts scheint wie erwartet zu funktionieren. Nach ein wenig Recherche fand ich heraus, dass e.relatedTarget das html nur ist, bevor die Maus das Fenster verlässt.

Also ... ich bin am Ende mit:

document.body.addEventListener('mouseout', function(e) {
    if(e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});

Bitte lassen Sie mich wissen, wenn Sie Probleme oder Verbesserungen finden!

2
Symba

Die Verwendung des onMouseLeave-Ereignisses verhindert Blasenbildung und ermöglicht es Ihnen, leicht zu erkennen, wann die Maus das Browserfenster verlässt.

<html onmouseleave="alert('You left!')"></html>

http://www.w3schools.com/jsref/event_onmouseleave.asp

2
Samy Bencherif
$(window).mouseleave(function() {
 alert('mouse leave');
});
1
sandeep kumar

Wenn Sie ständig OnMouseOver im body-Tag hören, dann möglicherweise ein Rückruf, wenn das Ereignis nicht auftritt. Dies kann jedoch, wie Zack angibt, sehr hässlich sein, da nicht alle Browser Ereignisse auf dieselbe Weise behandeln Es besteht die Möglichkeit, dass Sie MouseOver verlieren, selbst wenn Sie sich auf derselben Seite über einem Div befinden.

1
Pablo Albornoz

wende dieses css an:

html
{
height:100%;
}

Dadurch wird sichergestellt, dass das HTML-Element die gesamte Höhe des Fensters einnimmt.

wende dieses Jquery an:

$("html").mouseleave(function(){
 alert('mouse out');
});

Das Problem mit Mouseover und Mouseout besteht darin, dass das Ereignis ausgelöst wird, wenn Sie den Mauszeiger auf ein untergeordnetes Element bewegen. Die Funktion, die ich gegeben habe ist nicht wurde beim Mauszeiger auf ein untergeordnetes Element ausgelöst. Sie wird nur ausgelöst, wenn Sie mit der Maus aus dem Fenster fahren

nur für Sie zu wissen, können Sie es tun, wenn der Benutzer im Fenster mauset:

$("html").mouseenter(function(){
  alert('mouse enter');
});
1
www139
$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})

Dies kann etwas hackig sein, wird aber nur ausgelöst, wenn die Maus das Fenster verlässt. Ich habe immer wieder Kinderereignisse gesehen und das wurde gelöst

1
Cekaleek

Vielleicht würde dies einigen von denen helfen, die später hierher kommen .window.onblur und document.mouseout.

window.onblur wird ausgelöst wenn:

  • Sie wechseln mit Ctrl+Tab oder Cmd+Tab zu einem anderen Fenster.
  • Sie konzentrieren sich (nicht nur mit dem Mouseover) auf den Dokumentinspektor.
  • Sie wechseln die Desktops.

Grundsätzlich, wenn der Browser-Tab den Fokus verliert.

window.onblur = function(){
    console.log("Focus Out!")
}

document.mouseout wird ausgelöst wenn:

  • Sie bewegen den Cursor auf die Titelleiste.
  • Sie wechseln mit Ctrl+Tab oder Cmd+Tab zu einem anderen Fenster.
  • Öffnen Sie den Cursor zum Dokumentinspektor.

Grundsätzlich auf jeden Fall, wenn der Cursor das Dokument verlässt.

document.onmouseleave = function(){
    console.log("Mouse Out!")
}
0
Jayant Bhawal

Ich habe dies nicht getestet, aber mein Instinkt wäre, einen Aufruf der OnMouseOut-Funktion für den Body-Tag auszuführen.

0
Ender

Das hat bei mir funktioniert. Eine Kombination einiger Antworten hier. Und ich habe den Code nur einmal eingefügt. Und das Modell verschwindet, wenn es an anderer Stelle angeklickt wird.

<script>
    var leave = 0
    //show modal when mouse off of page
    $("html").mouseleave(function() {
       //check for first time
       if (leave < 1) {
          modal.style.display = "block";
          leave = leave + 1;
       }
    });

    // Get the modal with id="id01"
       var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
          if (event.target == modal) {
             modal.style.display = "none";
          }
       }
</script>
0
Morgan Hayes

Ich habe es nacheinander versucht und oben die akzeptierte Antwort gefunden , die tatsächlich funktioniert !

https://stackoverflow.com/a/3187524/985399

Ich überspringe alte Browser und habe den Code so verkürzt, dass er in modernen Browsern mit IE9 + funktioniert:

    document.addEventListener("mouseout", function(e) {
        let t = e.relatedTarget || e.toElement;
        if (!t || t.nodeName == "HTML") {
          console.log("left window");
        }
    });

Hier sehen Sie die Browser-Unterstützung

Aber "mouseout" löst alle Elemente im Dokument aus . Der Code, der verhindert, dass dies passiert, wird durch mouseleave (IE5.5 + se link) entfernt.

Der folgende Code funktioniert sowohl mit Mausklick als auch mit Ziehen-Loslassen außerhalb des Dokuments :

var x = 0

document.onmouseleave = function(e) { console.log(x++) }

Haben Sie das Ereignis nicht auf document.body, da die Bildlaufleiste des Fensters es verkleinern und über der Bildlaufleiste auslösen kann.