Javascript-Ereignis, wenn Maus Browserfenster verlässt [Duplikat]

https://stackoverflow.com/questions/1672142

13-09-2019
|

Frage

Diese Frage bereits eine Antwort hier:

Wie kann ich erkennen, wenn die Maus das Fenster verlässt? 17 Antworten

Ich möchte einige Javascript-Code auszuführen, wenn die Maus das Browserfenster verlässt. Ich brauche nur Safari zu unterstützen (WebKit).

Ich habe versucht, einen mouseout Handler auf Fenster setzen. Das Handler wird zuverlässig aufgerufen, wenn die Maus, um das Browser-Fenster verlässt. Aber weil es von sprudelnden ist auch, wenn die Maus bewegt sich zwischen den Elementen in dem Dokument genannt. Ich kann nicht herausfinden, wie zu bestimmen, wann die Maus tatsächlich hat das Fenster nach links und wenn es nur zwischen den Elementen bewegt wird.

Wenn die Maus das Fenster verläßt, genau ein Ereignis erzeugt wird, und das Zielelement erscheint das Element zu sein, die Maus tatsächlich vorbei war. So überprüfen, ob das Zielelement Fenster oder Dokument ist nicht funktioniert. Und die ganze Seite in einem unsichtbaren enthält div Einwickeln funktioniert auch nicht: Wenn das div unsichtbar ist, dann wird die Maus nie darüber sein, so ändert sich nichts.

(Das gleiche passiert, wenn ich den Handler auf dem Dokument oder document.body setzen, mit der Ausnahme, dass überraschend document.body nicht Mouseover / mouseout Ereignisse bekommt, wenn die Maus betritt oder verlässt ein leeres Teil des Fensters, wie die leeren vertikaler Raum durch absolut erstellt mit Boden ein Element positionieren.. 0 Dazu Raum, Dokumenten- und Fenster Mouseover / mouseout Ereignisse mit dem Ziel zu sein , aber document.body nicht)

Einige Ideen, die ich hatte:

Auf jeder mouseout Veranstaltung erhalten Sie die aktuelle Position der Maus und sehen, ob es in der Tat über das Fenster ist. Aber ich weiß nicht, ob dies tatsächlich möglich ist, und es klingt wie es schwierig sein würde, alle die Rennbedingungen zu beseitigen.
Auch ein Mouseover-Handler registrieren und Fälle erfassen, in denen mouseout nicht (oder kurz gefolgt von a) vorgegangen wird eine Maus darüber geht. Aber das würde einen Timer erfordern.

Wir verwenden prototype.js so ideal würde Ich mag die Lösung in Bezug auf Prototyp Event.observe zum Ausdruck bringen, aber ich kann diesen Teil herausfinden.

Vielen Dank für Ihre Anregungen!

Lösung

Zusammenfassung: Das sauber gemacht werden kann während der mouseout Ereignis die Eigenschaft related indem geprüft wird. Wenn related kein Kind des Dokuments ist, dann links die Maus einfach aus dem Fenster. Es ist einfach, sich selbst zu tun, aber wenn Sie nicht wollen, einige Bibliotheken (Mootools, Prototype Zukunft ..) haben backene in Funktionalität, und andere (aktuelle Prototyp) haben Erweiterungen zur Verfügung. Auf IE, könnten Sie stattdessen verwenden mouseleave, die eine nicht-sprudelnde Version von mouseout ist.

Details:

IE hat Ereignisse genannt MouseEnter- und mouseleave, die nicht-sprudelnde Versionen von Mouseover- und mouseout sind. Anderer Browser nicht, aber wenn sie es tun, täte einen mouseleave Zuhörer auf Fenster oder Dokument Einstellung den Trick.

Ein Herr namens Ken Snyder kommt zur Rettung:

Auf einem Mouseover, die related Eigenschaft verweist den Knoten aus die der Zeiger kam. Auf einem mouseout, die related Eigenschaft Referenzen der Knoten, der Zeiger zu dem went.On Jedenfalls ist der Umfang der Knoten der das Ereignis wird attached.When die related ist ein Kind nicht von der current, ein Mouseover-Ereignis entspricht einem Ereignis und eine MouseEnter- mouseout Ereignis entspricht einer mouseleave-Ereignis.

- http://kendsnyder.com/archives/6-MouseEnter- and-MouseLeave.html

Dies macht es möglich, MouseEnter- und mouseleave in anderen Browsern zu implementieren. In der Tat bietet Ken gleichen Prototype-Code, dies zu tun: http://kendsnyder.com/sandbox/enterleave /MouseEnterLeave.js

Duroth wies darauf hin, in den Kommentaren, dass MooTools enthält bereits etwas ähnliches. (Danke Duroth.) Es klingt wie der kommende Prototyp Release (1.6.2) kann diese Funktionalität enthält, aber ich kann nicht etwas Bestimmtes finden.

Andere Tipps

nur Mit Javascript, keinen Prototyp oder jquery etc.

<html>
<head>
<script type="text/javascript">
  var mouseX = 0;
  var mouseY = 0;
  var counter = 0;
var mouseIsIn = true;
function wireEvent() {
window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        if ((mouseY >= 0 && mouseY <= window.innerHeight)
        && (mouseX >= 0 && mouseX <= window.innerWidth))
            return;
        //do something for mouse out
        counter++;
        mouseIsIn = false;
        document.getElementById('in_out').innerHTML='out' + counter;
    },
    false);
window.addEventListener("mouseover",
    function(e){
        if(mouseIsIn)
            return;
        //do something for mouse over
        counter++;
        mouseIsIn = true;
        document.getElementById('in_out').innerHTML='in' + counter;
    },
    false);
}
</script> 
</head>
<body onload="wireEvent();">
<div id="in_out">&nbsp;</div>
<div style="width:300px; height: 200px; background: red;">Dummy element</div>
</body>
</html>

UPDATE:
Hinzugefügt Check für Mausposition auf mouseout ausgelöst, wenn in / out Elemente innerhalb des Körpers zu bewegen. Wenn es innerhalb des Fensters ist, wird mouseout Ereignis nicht ausgelöst.
Außerdem führte einen Flag zum aktuellen Status der Maus ‚in‘ oder ‚out‘ unter Verwendung von mouseIsIn. Wenn es true ist, mouseover nicht triggern.

Vielleicht können Sie einen Listener für Mouseover- und mouseout document, body oder ein anderes Element festgelegt, die das gesamte Dokument Wraps, und verwenden, die (durch Einsparung, dass es passiert ist) als Auslöser, um zu bestimmen, ob es eine gültige mouseout auf Fenster ist?

Gelingt das nicht, Ihre erste Idee (in Bezug auf Position check) sollte ziemlich gut funktionieren. Jedes Ereignis, geht entlang der X / Y das Ereignis aufgetreten ist. Wenn es etwas weiter als die Höhe / Breite des Fensters ist, verlassen Sie das aktuelle Fenster. Wenn es negativ ist alles, links können Sie die Fenster. Und vielleicht, wenn es genau die Höhe / Breite ist oder genau top: 0 oder links: 0, dann links Sie das Fenster

Wenn die Maus jedes Element verlässt, einschließlich der Fenster, wird das Fenster Objekt ein mouseout Ereignis ausgelöst und das event Objekt zusammen mit ihm passieren.

Eines der Elemente im Ereignisobjekt wird toElement genannt, der ein Zeiger auf das Element ist die Maus nur eingegeben werden, wenn es die alten links. Aber wenn die Maus das Fenster verlässt, gibt es keine solche toElement so dieser Artikel null wird.

Durch die Prüfung, ob dieser Artikel ist null auf einem mouseout Ereignisse, können Sie feststellen, ob die Maus, um das Fenster verlassen. Hier ist der Code:

window.onmouseout=function(event){ 
  if(event.toElement===null) console.log('the mouse left the window'); 
}

Ihr Problem kommt von mouseout Ereignisse erzeugt werden, für die Elemente innen Fenster, die dann sprudeln wie in der W3C Ereignisse spec . Sie können das Ereignis, welches Element überprüfen tatsächlich beschossen:

function mouseoutFunction(event) {
  event = event || window.event;
  var sender = event.srcElement || event.target;
}

Hier ist meine Lösung auf einem Timer basiert. Der Timer ist hier im Grunde verwendet, um eine Chance für anderen Event-Handler zu geben (insbesondere Onmouseover) auszuführen, bevor sie entscheiden, dass die mosue aus dem Fenster ist. Der Timeout von 1 ms (eigentlich um 33 ms, gibt es eine minimale Timer-Auflösung) gibt eine wenig Zeit für die Mouseover auftreten, wenn es bereits nicht.

var inWin=0;
window.onmouseout = function(e)
{
   inWin--;
   setTimeout(checkIfOut, 1);
}
window.onmouseover = function(e)
{
   inWin++;
}

function checkIfOut()
{
   if(!inWin)
   {
     //Yay! Mouse is out of the window (probably)
   }
}

Sie können mit onmouseout Ereignis in einem Fenster statt

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow