Ich möchte in der Lage zu erkennen, wenn die Maus das Fenster verlässt, damit ich Ereignisse von feuern stoppen kann, während die Maus des Benutzers woanders ist.Wie kann ich erkennen, wenn die Maus das Fenster verlässt?
Irgendwelche Ideen, wie man das macht?
Ich habe dies nicht getestet, aber mein Instinkt wäre ein OnMouseOut Funktionsaufruf auf dem Body-Tag zu tun.
Vielleicht, wenn Sie OnMouseOver im Body-Tag ständig hören, dann Callback, wenn das Ereignis nicht auftritt, aber, wie Zack sagt, könnte dies sehr hässlich sein, weil nicht alle Browser Ereignisse auf die gleiche Weise behandeln, Es gibt sogar eine Möglichkeit, dass Sie den MouseOver verlieren, auch wenn Sie über ein div auf der gleichen Seite sind.
Ich nehme zurück, was ich gesagt habe. Es ist möglich. Ich habe diesen Code geschrieben, funktioniert perfekt.
window.onload = function() {
$span = document.getElementById('text');
window.onmouseout = function() {
$span.innerHTML = "mouse out";
}
window.onmousemove = function() {
$span.innerHTML = "mouse in";
}
}
arbeitet in Chrome, Firefox, Oper. Aint in IE getestet, aber angenommen, es funktioniert.
bearbeiten. IE verursacht immer Ärger. Um es in IE funktioniert, ersetzen Sie die Ereignisse aus dem Fenster zu dokumentieren:
window.onload = function() {
$span = document.getElementById('text');
document.onmousemove = function() {
$span.innerHTML = "mouse move";
}
document.onmouseout = function() {
$span.innerHTML = "mouse out";
}
}
kombinieren sie für cross kick ass Cursor Erkennung o0: P
Diese Art von Verhalten ist in der Regel gewünscht, während Drag & Drop-Verhalten der Umsetzung auf einer HTML-Seite. Die folgende Lösung wurde mit 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; Cross-Browser-Event-Handler:
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
Und dann diese Methode verwenden, um einen Ereignishandler auf das Dokument Objekte mouseout Ereignis anhä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");
}
});
Schließlich ist hier eine HTML-Seite mit dem Skript für das Debuggen eingebettet:
<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>
Die Verwendung von window.event hat mein Problem beim Abrufen dieses Ereignisses behoben. Vielen Dank! – Jay
sieht es so aus, als würde dies nicht ausgelöst, wenn die Maus nicht in Chrom gedrückt wird. es feuert, wenn die Maus in Chrom gedrückt wird. scheint wie inkonsistentes Verhalten. –
Dies funktioniert nicht, wenn andere HTML-Elemente das Fenster füllen. – Emmanuel
Dies funktioniert für mich:
addEvent(document, 'mouseout', function(evt) {
if (evt.toElement == null && evt.relatedTarget == null) {
alert("left window");
}
});
Was ist 'addEvent'? –
es ist eine Funktion definiert in [Joshua Mills Antwort] (http://stackoverflow.com/a/3187524/540776) – superjos
auf ie8, relatedTarget ist undefiniert, auf ie9 + und Firefox, toElement ist undefiniert.Weil es die richtige Bewertung ist: if ((evt.relatedTarget === null) || (evt.toElement === null)) { – carlos
Wenn Sie mit jQuery dann, wie über diese kurz und süß-Code -
$(document).mouseleave(function() {
console.log('out');
});
Dieses Ereignis ausgelöst wird, wenn die Maus nicht auf Ihrer Seite ist, wie Sie wollen. Ändern Sie einfach die Funktion, um zu tun, was Sie wollen.
Und man kann auch verwenden:
$(document).mouseenter(function() {
console.log('in');
});
auszulösen, wenn die Maus wieder auf der Seite tritt zurück.
mouseleave funktioniert, aber es wird auch ausgelöst, wenn inspect-Element geöffnet ist, wie zu verhindern? Idee? –
Diese Technik ist nicht stabil in Chrome 15 bis 56 (meine aktuelle Version). Aber es funktioniert sehr in Firefox. Siehe: http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event – Tremours
mouseleave scheint viel mehr zu schießen, als es sollte. – Alexander
diese CSS anwenden:
html
{
height:100%;
}
Dies stellt sicher, dass das HTML-Element über die gesamte Höhe des Fensters in Anspruch nimmt.
dieses jquery gelten:
$("html").mouseleave(function(){
alert('mouse out');
});
Das Problem mit Mouseover- und mouseout ist, dass, wenn Sie die Maus über/aus html auf ein untergeordnetes Element es das Ereignis ausgelöst wird. Die Funktion, die ich gab, wird nicht ausgelöst, wenn auf ein untergeordnetes Element mousing. Es wird nur ausgelöst, wenn Sie mit der Maus aus/in des Fensters
nur für Sie zu wissen, tun es für, wenn der Nutzer die Maus im Fenster:
$("html").mouseenter(function(){
alert('mouse enter');
});
Von "Ich glaube nicht, dass Javascript eine äquivalente Funktion hat", Sie meinen Wissen Sie, dass jQuery eine JavaScript-Bibliothek ist und dass jQuery mit WITH und FOR Javascript geschrieben wird? –
@MilchePatern Ich schrieb diese Antwort vor fast zwei Jahren. Ich war damals unwissender und ich wusste nicht, dass alles, was in jQuery gemacht wurde, in reinem JavaScript gemacht werden kann. Ich werde die Antwort aktualisieren ... – www139
Dies funktioniert in chrom,
$(document).bind('dragleave', function (e) {
if (e.originalEvent.clientX == 0){
alert("left window");
}
});
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 benutze dies für ein Drag & Drop-Datei-Upload-Widget. Es ist nicht absolut genau, ausgelöst wird, wenn die Maus eine bestimmte Entfernung vom Rand des Fensters erreicht.
Ich glaube, das wird manchmal nicht ausgelöst, wenn die Mausbewegung "schnell genug" ist. –
@JohnWeisz Ja, ich denke du hast Recht. Ich habe dieses Skript jetzt schon eine Weile benutzt und es funktioniert gut. – Emmanuel
Ich habe alles oben versucht, aber nichts scheint zu funktionieren wie erwartet. Nach ein wenig Forschung fand ich, dass e.relatedTarget ist html nur bevor die Maus das Fenster verlässt.
So ... Ich habe mit diesem Ende:
document.body.addEventListener('mouseout', function(e) {
if(e.relatedTarget === document.querySelector('html')) {
console.log('We\'re OUT !');
}
});
Bitte lassen Sie mich wissen, wenn Sie irgendwelche Fragen oder Verbesserungen finden!
Gut genug für mich. –
Nicht für mich auf Chrom funktioniert. 'relatedTarget' ist null, wenn die Maus das Fenster verlässt. Inspiriert von der Antwort von @ user1084282, ändern Sie diese in: 'if (! E.relatedTarget &&! E.toElement) {...}' und es funktioniert – JoeRocc
Die Verwendung des onMouseLeave-Ereignisses verhindert Blasenbildung und ermöglicht die einfache Erkennung, wenn die Maus das Browserfenster verlässt.
<html onmouseleave="alert('You left!')"></html>
Das funktioniert genau so, wie ich es brauchte! –
Vielleicht würde dies später hier einige von denen helfen kommen. window.onblur und document.mouseout.
window.onblur wird, wenn ausgelöst:
Ctrl+Tab oder Cmd+Tab verwenden.Grundsätzlich jederzeit dieser Browser Registerkarte verliert den Fokus.
window.onblur = function(){
console.log("Focus Out!")
}
document.mouseout ausgelöst wird, wenn:
Ctrl+Tab oder Cmd+Tab wechseln Sie in ein anderes Fenster.Grundsätzlich in jedem Fall, wenn der Cursor das Dokument verlässt.
document.onmouseleave = function(){
console.log("Mouse Out!")
}
"immer wenn diese Browser-Registerkarte den Fokus verliert." .. mit IE älteren Versionen ist das 'blur' Ereignis DOM compoled wenn/nachdem ein anderes Element den Fokus erhält, für goochrom ist es wenn das Element selbst den Fokus verliert .. nur um zu erwähnen. –
$(window).mouseleave(function(event) {
if (event.toElement == null) {
//Do something
}
})
Dies könnte ein bisschen hacky, aber es wird nur ausgelöst, wenn die Maus das Fenster verlässt. Ich fing Kinderereignisse ab und das löste es
$(window).mouseleave(function() {
alert('mouse leave');
});
Das funktionierte für mich. Eine Kombination einiger Antworten hier. Und ich habe den Code, der ein Modell zeigt, nur einmal eingefügt. Und das Modell verschwindet, wenn irgendwo anders geklickt 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>
Um mouseleave zu erfassen, ohne in Berücksichtigung der Bildlaufleiste und das autcomplete Feld oder inspizieren:
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");
}
});
Erklärungen Bedingungen:
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
Haben Sie getestet, wie gut das funktioniert zusammen mit Elementen auf der Seite? Ich würde denken, dass Elemente, die ihre eigenen "Onmouseover/Out" -Ereignisse haben, die Blasenbildung möglicherweise aufheben und diese Funktionalität zerstören könnten. –
Ja, es funktioniert gut mit und ohne Elemente auf der Seite. – Ozzy
Ozzy, Dan versucht zu erklären, dass ein Element, das die Ereignisausbreitung stoppt, verhindert, dass das Ereignis das Dokument/Fenster erreicht, wodurch Ihre Lösung unwirksam wird. – James