Comment puis-je détecter lorsque la souris sort de la fenêtre?

Je veux être en mesure de détecter lorsque la souris sort de la fenêtre afin que je puisse arrêter les événements de tir, tandis que l'utilisateur de la souris est ailleurs.

Toutes les idées de comment faire cela?

Découvrez ce beeker sortie d'intention de github de la bibliothèque. C'est génial. github.com/beeker1121/exit-intent-popup
Utiliser mouseleave pour empêcher le tir sur tous les éléments comme le mouseout ne: Très bonne explication et support: developer.mozilla.org/en-US/docs/Web/API/Element/...
Définition de l'événement sur le document - pas de document.corps pour éviter les incendies abowe barre de défilement. Windows barre de défilement semblent réduire le corps.

InformationsquelleAutor | 2009-05-28

92

Ce type de comportement est généralement nécessaire lors de l'exécution de glisser-déposer comportement sur une page html. La solution ci-dessous a été testé sur IE 8.0.6, FireFox 3.6.6, Opéra 10.53, et Safari 4 sur un MME ordinateur Windows XP.

D'abord un peu de fonction de Peter-Paul Koch; croix-navigateur gestionnaire d'événement:
```
function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}
```
Et ensuite utiliser cette méthode pour joindre un gestionnaire d'événements pour les objets document mouseout événement:
```
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");
    }
});
```
Enfin, voici une page html avec le script intégré à des fins de débogage:
```
<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>
```
- À l'aide de la fenêtre.l'événement a fixé mon problème pour faire de cet événement. Merci!
- il semble que ce n'est pas le feu lorsque la souris n'est pas activé dans le navigateur chrome. il n'feu lorsque la souris est enfoncé dans google chrome. semble comme un comportement incohérent.
- Cela ne fonctionne pas si d'autres éléments HTML sont le remplissage de la fenêtre.
- Le problème avec cette solution est qu'il alerte la fenêtre de gauche, même si l'utilisateur essaie juste d'utiliser la barre de défilement. J'ai publié solution à ce problème ici, mais il y a encore un problème doit être résolu (voir le lien).
- bizarre, il n'est pas du travail en Chrome 49, au moment de quitter sans appuyez sur le bouton gauche ou le bouton droit, il fonctionne. mais si maintenez le bouton de gauche, il n'a pas tiré.
- J'ai trouvé que lors de l'utilisation de la marge en haut de votre page, il lit que la sortie de la fenêtre.. Donc en utilisant le rembourrage au lieu de cela résout ce!
- Deuxième chose que j'ai trouvé, c'est que quand je rentre du haut de votre navigateur (souris va à l'adresse-bar ou au-dessus et en arrière de la "fenêtre de navigateur"), il fonctionne comme prévu. Quand j'entre dans la page à partir de la gauche (donc de la souris va à dekstop et à l'arrière dans le navigateur de la fenêtre"), il ne voit pas que je suis entré dans le dos à la fenêtre. Toutes les corrections pour cela?
- Utiliser mouseleave au lieu de mouseout pour prévenir les incendies sur les éléments dans le document. Très bonne explication et il fonctionne sur IE5.5 ... developer.mozilla.org/en-US/docs/Web/API/Element/...
InformationsquelleAutor J Mills
39

Si vous utilisez jQuery, comment à ce sujet court et doux code -
```
$(document).mouseleave(function () {
    console.log('out');
});
```
Cet événement va déclencher à chaque fois que la souris n'est pas dans votre page comme vous le souhaitez. Il suffit de changer la fonction de faire ce que vous voulez.

Et vous pouvez également utiliser:
```
$(document).mouseenter(function () {
    console.log('in');
});
```
À déclencher lorsque la souris entre dans le dos de la page à nouveau.

Source: https://stackoverflow.com/a/16029966/895724
- mouseleave est un travail, mais c'est aussi le tir si inspecter l'élément est ouvert, comment les prévenir? Idée?
- Cette technique n'est pas stable en Chrome de 15 à 56 (ma version actuelle). Mais il fonctionne très bien dans Firefox. Voir: stackoverflow.com/questions/7448468/...
- mouseleave semble à feu beaucoup plus qu'il ne le devrait.
- Il déclenche également si la fenêtre est en arrière-plan (navigateur n'est pas centrée) et de la souris entre dans la fenêtre (Chrome 61/macOS10.11)
- Lors de l'utilisation de cela, sachez que google chrome dispose d'une bug majeur concernant mouseleave: bugs.chromium.org/p/chromium/issues/detail?id=798535
InformationsquelleAutor Mandeep Janjua
23

Cela fonctionne pour moi:
```
addEvent(document, 'mouseout', function(evt) {
  if (evt.toElement == null && evt.relatedTarget == null) {
    alert("left window");
  }
});
```
- Qu'est-ce que addEvent?
- c'est une fonction définie dans Joshua Mills réponse
- sur ie8, relatedTarget est pas défini, sur ie9+, firefox, toElement est pas défini. Parce qu'il, l'évaluation correcte est: if (evt.relatedTarget === null) || (evt.toElement === null)) {
- Le prédicat peut être plus concis que dans if (!evt.toElement && !evt.relatedTarget)
InformationsquelleAutor user1084282

Afin de détecter mouseleave sans prendre en compte la barre de défilement et de la autcomplete champ ou d'inspecter :

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");

  }
});

Conditions explications:

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

InformationsquelleAutor Daphoque

5

Aucune de ces réponses a fonctionné pour moi. Je suis maintenant à l'aide de:
```
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');
    }

});
```
Je suis en utilisant ce pour un glisser-déposer de fichier téléchargement de widget. Ce n'est pas tout à fait exact, étant déclenchée lorsque la souris arrive à une certaine distance à partir du bord de la fenêtre.
- Je crois que ça va parfois de ne pas déclencher si le mouvement de la souris est "assez vite".
- Oui, je pense que vous avez raison. J'ai utilisé ce script pour un certain temps maintenant et il fonctionne bien.
- L'utilisation de 'dragexit' insted: help.dottoro.com/ljbonkao.php
InformationsquelleAutor Emmanuel
4

À l'aide de la onMouseLeave événement empêche bouillonnante et vous permet de détecter facilement lorsque la souris sort de la fenêtre du navigateur.
```
<html onmouseleave="alert('You left!')"></html>
```
http://www.w3schools.com/jsref/event_onmouseleave.asp
- Cela fonctionne comme je le voulais!
- Fantastique!!!! Le soutien est IE5.5+ ... Fonctionne aussi: document.onmouseleave = function() { alert('You left!') }; Utilisez pas le document.corps que les feux de abowe les barres de défilement qui rétractable du corps! Code pour prévenir les incendies sur des éléments n'est pas nécessaire. Bonne explication: developer.mozilla.org/en-US/docs/Web/API/Element/...
InformationsquelleAutor Samy Bencherif
3

Je reprends ce que j'ai dit. Il est possible. J'ai écrit ce code, fonctionne parfaitement.
```
window.onload = function() {

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

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

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

}
```
fonctionne dans chrome, firefox, opéra. N'est-ce pas testé sous IE, mais supposons qu'il fonctionne.

modifier. IE comme toujours source de problèmes. Pour le faire fonctionner sous IE, remplacer les événements à partir de la fenêtre de document:
```
window.onload = function() {

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

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

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

}
```
les combiner pour crossbrowser coup de pied au cul curseur de détection o0 😛
- Avez-vous testé comment cela fonctionne avec des éléments sur la page? Je pense que l'un des éléments qui ont leur propre "onmouseover/out" événements pourraient annuler le bouillonnement et de briser cette fonctionnalité.
- Oui, il fonctionne très bien avec et sans éléments sur la page.
- Ozzy, Dan est d'essayer d'expliquer qu'un élément qui arrête la propagation de l'évènement permettra d'éviter la manifestation d'atteindre la fenêtre, ce qui rend votre solution inefficace.
- Je viens de tester avec d'autres éléments avec leur propre onmousemove et onmouseout événements et il fonctionne toujours très bien.
- Oui d'accord, mais encore une fois, nous parlons de la propagation de l'évènement. Si vous délibérément arrêter la propagation de l'évènement avec l'ÉVÉNEMENT.stopPropagation() (pour IE, de l'ÉVÉNEMENT.cancelBubble=true), alors il ne sera pas de la bulle jusqu'à la fenêtre... Pour contrer cela, vous pourriez utiliser l'événement de capture dans les navigateurs qui le supportent.
- Rappelez-vous qu'en JS pour déclarer une variable, vous devez utiliser 'var'. Maintenant, la variable $durée est implicite global, qui n'est probablement pas ce que vous voulez. Aussi dans le cas où il n'est pas intentionnel, vous n'avez pas besoin d'un $ dans les noms de variable.
InformationsquelleAutor Ozzy
3

J'ai essayé tous les ci-dessus, mais rien ne semble fonctionner comme prévu. Après un peu de recherche, j'ai trouvé que e.relatedTarget est le html juste avant de la souris sort de la fenêtre.

Donc ... je me suis retrouver avec ceci:
```
document.body.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === document.querySelector('html')) {
        console.log('We\'re OUT !');
    }
});
```
S'il vous plaît laissez-moi savoir si vous trouvez des problèmes ou des améliorations !

2019 mise à Jour

(comme user1084282 découvert)
```
document.body.addEventListener('mouseout', function(e) {
    if (!e.relatedTarget && !e.toElement) {
        console.log('We\'re OUT !');
    }
});
```
- Assez bon pour moi.
- Pas de travail pour moi sur chrome. relatedTarget est nulle lorsque la souris sort de la fenêtre. Inspiré par @user1084282 réponse, changer à cela: if(!e.relatedTarget && !e.toElement) { ... } et il fonctionne
- Je confirme que cela fonctionne très bien sur Chrome, Firefox et IE Bord, si vous utilisez if(!e.relatedTarget && !e.toElement) à la place de l'état dans la réponse exacte. Il détecte la souris quitter le corps du document.
- N'ont pas l'événement sur le document.corps parce que les fenêtres de la barre de défilement peut rétrécir et de feu abowe le défilement. Et pourquoi avez-vous 'mouseout' qui déclenche toutes les bulles des éléments quand vous pouvez avoir 'mouseleave'? developer.mozilla.org/en-US/docs/Web/API/Element/...
InformationsquelleAutor Symba
1

appliquer ce css:
```
html
{
height:100%;
}
```
Cela garantit que le code html de l'élément prend toute la hauteur de la fenêtre.

appliquer cette jquery:
```
$("html").mouseleave(function(){
 alert('mouse out');
});
```
Le problème avec mouseover et mouseout, c'est que si vous passez la souris sur l'entrée/sortie de html d'un élément enfant, il déclenche l'événement. La fonction que j'ai donné n'est pas mis hors tension lorsque le pointeur de la souris sur un élément enfant. Il s'éteint lorsque le pointeur de la souris hors/en de la fenêtre

juste pour que vous savez que vous pouvez faire pour que lorsque l'utilisateur passe la souris dans la fenêtre:
```
$("html").mouseenter(function(){
  alert('mouse enter');
});
```
- Par "je ne crois pas que javascript a une fonction équivalente", vous voulez dire, vous ne savez pas que jQuery EST UNE bibliothèque de fonctions javascript et jQuery EST écrit AVEC et POUR le javascript ?
- J'ai écrit cette réponse presque deux ans. J'ai été plus ignorant à l'époque, et je ne savais pas que le fait que tout ce qui est fait en jQuery peut être fait en JavaScript. Je vais mettre à jour la réponse...
InformationsquelleAutor www139
0

Peut-être si vous êtes constamment à l'écoute des OnMouseOver dans la balise body, puis de rappel lorsque l'événement n'est pas provoqués, mais, comme Zack, cela peut être très laid, parce que pas tous les navigateurs de gérer les événements de la même manière, il est même possible que vous perdez le passage de la Souris, même en étant sur une div dans la même page.
- Il n'est pas une réponse
InformationsquelleAutor Pablo Albornoz
0

Peut-être que cela aidera certains de ceux qui viennent ici plus tard.
window.onblur et document.mouseout.

window.onblur est déclenché lorsque:
- Vous basculez vers une autre fenêtre à l'aide de Ctrl+Tab ou Cmd+Tab.
- De vous concentrer (et pas seulement du passage de la souris) sur l'inspecteur de document.
- Vous passez les ordinateurs de bureau.
Fondamentalement, chaque fois QUE le navigateur onglet perd le focus.
```
window.onblur = function(){
    console.log("Focus Out!")
}
```
document.mouseout est déclenché lorsque:
- Vous déplacez le curseur sur la barre de titre.
- Vous basculez vers une autre fenêtre à l'aide de Ctrl+Tab ou Cmd+Tab.
- Vous ouvrez déplacez le curseur au-dessus de l'inspecteur de document.
Fondamentalement, en tout cas lorsque le curseur quitte le document.
```
document.onmouseleave = function(){
    console.log("Mouse Out!")
}
```
- "asically à tout moment QUE l'onglet du navigateur perd le focus." .. avec les anciennes versions d'IE, le 'flou' événement est DOM compoled quand/après l'autre élément reçoit le focus, pour gooChrome, c'est lorsque l'élément lui-même perd le focus .. juste pour le mentionner.
InformationsquelleAutor Jayant Bhawal
0
```
$(window).mouseleave(function(event) {
  if (event.toElement == null) {
    //Do something
  }
})
```
Cela peut être très orthodoxe, mais il ne sera déclenchée que lorsque la souris sort de la fenêtre. J'ai gardé la capture de l'enfant événements et ce résolues, il

InformationsquelleAutor Cekaleek

$(window).mouseleave(function() {
 alert('mouse leave');
});

InformationsquelleAutor sandeep kumar

Cela a fonctionné pour moi. Une combinaison de certaines de ses réponses ici. Et je l'ai inclus le code montrant un modèle qu'une seule fois. Et le modèle s'en va quand on clique n'importe où ailleurs.

<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>

Il n'y avait pas de jQuery tag sur la question
jQuery est beaucoup de code par rapport à ma réponse que le travail sur les navigateurs IE9+ et le reste. C'est sur la base de cette réponse, mais beaucoup plus court: stackoverflow.com/a/3187524/985399

InformationsquelleAutor Morgan Hayes

0

J'ai essayé l'un après l'autre et à trouver la accepté de répondre à abowe qui fonctionne réellement!

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

- Je me passer de vieux navigateurs, donc j'ai fait un code plus court pour fonctionner sur les navigateurs modernes IE9+:

JS:
```
    document.addEventListener("mouseout", function(e) {
        let t = e.relatedTarget || e.toElement;
        if (!t || t.nodeName == "HTML") {
          console.log("left window");
        }
    });
```
Ici, vous voyez les prise en charge du navigateur

Mais "mouseout" trigg sur tous les éléments dans le document. Code de l'empêcher de se produire est éliminé par mouseleave (IE5.5+ se lien).

Suivants du code du travail à la fois sur de la souris-le congé et glisser la libération à l'extérieur de document:

JS:
```
var x = 0

document.onmouseleave = function(e) { console.log(x++) }
```
N'ont pas l'événement sur document.body parce que les fenêtres de la barre de défilement peut rétrécir et de feu abowe le défilement.

InformationsquelleAutor Pauli Sudarshan Terho
-1

Je n'ai pas testé, mais mon instinct serait de faire un OnMouseOut appel de fonction sur la balise body.

InformationsquelleAutor Ender

-2

Cela fonctionne dans chrome,

$(document).bind('dragleave', function (e) {
    if (e.originalEvent.clientX == 0){
        alert("left window");
    }
});

InformationsquelleAutor anupraj

Vous devez vous connecter pour publier un commentaire.