Intereting Posts

Défilement d'un seul doigt pour la page Web – quelle technologie? Exemple de travail? Désactiver les dates dans pickadate-selecter et le rafraîchir Comment puis-je copier dans le presse-papiers en JavaScript? Séquence d'exécution de la méthode d'action Trouvez l'élément suivant de la fratrie dans DOM avec JavaScript Comment puis-je résoudre ce conflit de chemin AMD? Afficher DIV à la position du curseur dans Textarea Changez la couleur d'arrière-plan et la couleur du texte avec une minuterie avec Javascript Comment empêcher l'utilisateur d'imprimer des pages Web? En utilisant javascript ou jquery Javascript propertyIsEnumerable renvoie false mais toujours énumérable Internet Explorer 7 Les liens Ajax ne se chargent qu'une fois Enregistrement des informations d'identification dans le stockage local Comment puis-je détecter shift + key down dans javascript? Javascript randomise le tableau sans avoir d'élément en position de départ Argument.callee.name alternative dans la nouvelle norme JavaScript ECMA5

Comment puis-je détecter quand la souris quitte la fenêtre?

Je veux pouvoir détecter quand la souris quitte la fenêtre afin que je puisse empêcher les événements de tirer lorsque la souris de l'utilisateur est ailleurs.

Des idées sur la façon de faire cela?

Ce type de comportement est généralement souhaité lors de la mise en œuvre du comportement de glisser-déposer sur une page html. La solution ci-dessous a été testée sur IE 8.0.6, FireFox 3.6.6, Opera 10.53 et Safari 4 sur une machine MS Windows XP.
Premièrement, une petite fonction de Peter-Paul Koch; Gestionnaire d'événements croisés:

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

Ensuite, utilisez cette méthode pour attacher un gestionnaire d'événements à l'événement de l'objet de document mouseout:

 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é pour le 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>

Si vous utilisez jQuery, que dire de ce code court et sucré –

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

Cet événement déclenchera chaque fois que la souris n'est pas dans votre page comme vous le souhaitez. Changez simplement la fonction pour faire ce que vous voulez.

Et vous pourriez également utiliser:

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

Pour déclencher lorsque la souris retourne à la page à nouveau.

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

Cela fonctionne pour moi:

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

Aucune de ces réponses n'a fonctionné pour moi. J'utilise maintenant:

 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 l'utilise pour un widget de téléchargement de fichier glisser-déposer. Ce n'est pas absolument précis, déclenché lorsque la souris arrive à une certaine distance du bord de la fenêtre.

Je reprends ce que j'ai dit. C'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"; } }

Travaille à chrome, firefox, opéra. Aint testé dans IE, mais supposons qu'il fonctionne.

modifier. IE comme toujours cause des problèmes. Pour que cela fonctionne dans IE, remplacez les événements de la fenêtre au document:

 window.onload = function() { $span = document.getElementById('text'); document.onmousemove = function() { $span.innerHTML = "mouse move"; } document.onmouseout = function() { $span.innerHTML = "mouse out"; } }

Combinez-les pour crossbrowser kick ass detection de curseur o0: P

L'utilisation de l'événement onMouseLeave évite les bouffées et vous permet de détecter facilement lorsque la souris quitte la fenêtre du navigateur.

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

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

J'ai essayé tout ce qui précède, mais rien ne semble fonctionner comme prévu. Après un peu de recherche, j'ai constaté que e.relatedTarget est le html juste avant que la souris ne sort de la fenêtre .

Alors … Je finis par cela:

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

S'il vous plaît, faites-moi savoir si vous trouvez des problèmes ou des améliorations!

Peut-être que si vous écoutez constamment OnMouseOver dans la balise du corps, puis rappelez-vous lorsque l'événement n'arrive pas, mais, comme le déclare Zack, cela pourrait être très laid, car tous les navigateurs ne traitent pas les événements de la même manière, il y en a même Possibilité que vous perdez le MouseOver même en étant sur un div dans la même page.

 $(window).mouseleave(function(event) { if (event.toElement == null) { //Do something } })

Cela pourrait être un peu piquante, mais il ne déclenchera que lorsque la souris quitte la fenêtre. J'ai continué à attraper des événements pour enfants et cela l'a résolu

Je n'ai pas testé cela, mais mon instinct serait de faire un appel de fonction OnMouseOut sur l'étiquette du corps.

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

window.onblur est déclenché lorsque:

Vous passez à une autre fenêtre en utilisant Ctrl+Tab ou Cmd+Tab .
Vous vous concentrez (pas simplement sur la souris) sur l'inspecteur des documents.
Vous basculez sur les ordinateurs de bureau.

Fondamentalement chaque fois que l'onglet du navigateur perd son 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 passez à une autre fenêtre en utilisant Ctrl+Tab ou Cmd+Tab .
Vous ouvrez, déplacez le curseur sur l'inspecteur des documents.

Fondamentalement, en tout cas, lorsque votre curseur quitte le document.

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

Appliquez ce css:

 html { height:100%; }

Cela garantit que l'élément html occupe toute la hauteur de la fenêtre.

Appliquez cette jquery:

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

Le problème avec mouseover et mouseout est que si vous passez la souris sur / hors de html sur un élément enfant, cela déclenchera l'événement. La fonction que j'ai donnée n'est pas déclenchée lors de la transmission à un élément enfant. Il n'est déclenché que lors de la sortie de la fenêtre dans la fenêtre

Juste pour que vous sachiez que vous pouvez le faire pour quand l'utilisateur se connecte à la fenêtre:

 $("html").mouseenter(function(){ alert('mouse enter'); });

Cela fonctionnera en chrome,

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