Comment puis-je vérifier si la souris est sorti de la fenêtre du navigateur à l'aide de javascript/jquery?

J'ai besoin d'un moyen de le vérifier et voir si la souris est en dehors de la fenêtre du navigateur. Le problème est que l'événement mouseout (ou mousemove) n'est pas déclenché lorsque la souris se déplace RAPIDEMENT à l'extérieur de la fenêtre du navigateur (mon élément est près du bord). J'ai pensé que la meilleure façon de résoudre mon problème est de vérifier sur une minuterie si la souris est à l'intérieur de la fenêtre ou pas, mais je n'ai pas trouvé un moyen de le faire, car j'ai besoin d'un événement à feu afin d'obtenir les coordonnées de la souris.

Je suis un javascript/jquery newbie, mais il semble qu'il devrait y avoir un moyen de le faire, mais je certainement n'ai pas été capable de la trouver si loin. Peut-être que je force un événement de souris pour déclencher et de voir si il y a un xy valeur? Une idée de comment je pourrais faire?

Merci d'avance!

Bonne question... je ne suis pas un débutant mais je n'ai jamais rencontré avant. Cela peut être utile pour moi dans les prochaines semaines, en fait. Je vais faire quelques recherches autour et voir ce que je peux trouver.
Essayez d'utiliser mouseleave. Certainement, cela fonctionne comme prévu dans Firefox, et google Chrome je crois. Je n'ai pas testé IE, Opera ou Safari cependant.
Double Possible de Comment puis-je détecter lorsque la souris sort de la fenêtre?

InformationsquelleAutor Sabrina Leggett | 2012-01-15

6

Semble @Joshua Mills résolu ce problème ici:
- Comment puis-je détecter lorsque la souris sort de la fenêtre?
Bien qu'il n'a jamais été officiellement sélectionné comme réponse.
- Aussi loin que je peux dire qui déclenche un événement si la souris est déplacée à l'extérieur de la fenêtre du navigateur, mon problème est que le mouvement de la souris n'est pas de déclencher un événement lorsque la souris se déplace rapidement à l'extérieur de la fenêtre du navigateur. Si vous allez à docs.jquery.com/Tutorials:Mouse_Position, laisser le curseur 50 px du bord, noter les coordonnées, puis le déplacer rapidement le curseur à l'extérieur de la fenêtre du navigateur et les coordonnées de rester sur la même valeur. Donc, puisque le mouvement n'est pas enregistré, j'ai besoin d'un autre moyen de vérifier et de voir si la souris est à l'intérieur de la fenêtre du navigateur.
- Ok...à la fin, j'ai réalisé document.onmouseout feux en permanence, donc j'ai fini à l'aide de ce code. Je ne sais pas pourquoi le document.onmouseout travaille tellement mieux que $(".myelement").mouseout mais il ne! Merci.
InformationsquelleAutor Ayman Safadi

Vous devez vérifier la cible de l'événement pour s'assurer de la souris à gauche de la page entière.

Démonstration En Direct

JS

$(function() {
    var $window = $(window),
        $html = $('html');
    $window.on('mouseleave', function(event) {
        if (!$html.is(event.target))
            return;
        $('.comeback').removeClass('hidden');
    });
    $window.on('mouseenter', function(event) {
        $('.comeback').addClass('hidden');
    });
});

HTML

<div>
    <div>
        Test
    </div>
    <div class="comeback">
        Come back!
    </div>
    <div>
        Test
    </div>
</div>

CSS

.hidden { display: none; }

Le cas de test comprend un élément de nidification pour vérifier qu'il fonctionne vraiment.

Devrait être acceptée, des spectacles de démonstration et de code , pour résoudre la question

InformationsquelleAutor doug65536

Je pense, cela va ressembler à

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

InformationsquelleAutor Suneel Kumar

0

Il devrait être assez simple:
```
document.onmouseout = function() {
  alert('out');
};
```
Ou jQuery style:
```
$(document).mouseout(function() {
  alert('out');
});
```
Violon: http://jsfiddle.net/xjJAB/

Testé avec IE8, chrome, FF. L'événement déclenche à chaque fois pour moi au moins.
- En fait le document.onmouseout semble fonctionner beaucoup mieux que $('myelement').mouseout lorsque vous déplacez la souris rapidement hors de la fenêtre du navigateur. J'ai fini par l'intégrer dans mon code. Il serait intéressant de savoir si il existe un moyen d'obtenir les coordonnées de la souris/vérification si c'est dans le navigateur lorsque aucun mouvement de la souris est inscrit 🙂
- Ne fonctionne pas... les Feux ont aussi lorsque dans le navigateur...
- utilisation mouseleave au lieu
- est IE seul événement qui est émulé par jQuery. Pas beaucoup d'utilisation en plaine JS.
- Avez-vous de lire les étiquettes sur la question?
InformationsquelleAutor David Hellsing

Essayer avec:

document.addEventListener("mouseleave", function(e){
    if( e.clientY < 0 )
    {
         alert("I'm out!");
    }
}, false);

InformationsquelleAutor joseantgv

0

J'ai essayé l'un après l'autre et cela 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+:
```
document.addEventListener("mouseout", function() {
    let e = event, t = e.relatedTarget || e.toElement;
    if (!t || t.nodeName == "HTML") {
      console.log("left window");
    }
});
```
Ici, vous voyez les prise en charge du navigateur

InformationsquelleAutor Pauli Sudarshan Terho

Vous devez vous connecter pour publier un commentaire.