Je veux pouvoir détecter quand la souris quitte la fenêtre afin d'empêcher les événements de se déclencher lorsque la souris de l'utilisateur se trouve ailleurs.
Avez-vous une idée de la façon de procéder ?
Réponses
Trop de publicités?
Joshua Mills
Points
854
Veuillez garder à l'esprit que ma réponse a beaucoup vieilli.
Ce type de comportement est généralement souhaité lors de l'implémentation du 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.
Tout d'abord, une petite fonction de Peter-Paul Koch : le gestionnaire d'événements pour les navigateurs croisés :
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}Utilisez ensuite cette méthode pour attacher un gestionnaire d'événement à l'événement mouseout des objets du document :
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 incorporé 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>
Mandeep Janjua
Points
896
Si vous utilisez jQuery, que pensez-vous de ce code court et agréable ?
$(document).mouseleave(function () {
console.log('out');
});Cet événement se déclenchera chaque fois que la souris ne se trouve pas dans votre page comme vous le souhaitez. Il suffit de changer la fonction pour faire ce que vous voulez.
Et vous pourriez aussi utiliser :
$(document).mouseenter(function () {
console.log('in');
});A déclencher lorsque la souris revient sur la page.
Daphoque
Points
1862
Afin de détecter le départ de la souris sans tenir compte de la barre de défilement et du champ de complétion automatique 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");
}
});Explications des conditions :
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\======================== EDIT ===============================
document.addEventListener("mouseleave") semble ne pas être déclenché sur la nouvelle version de Firefox, mouseleave doit être attaché à un élément comme body, ou un élément enfant.
Je suggère d'utiliser plutôt
document.body.addEventListener("mouseleave")Ou
window.addEventListener("mouseout")
user1084282
Points
154
dippas
Points
7854
Voici une réponse à 2021 :
Vous pouvez utiliser mouseleave (et mouseenter à détecter lors de l'entrée) dans la html (testé dans Chrome 91 et Firefox 90)
Essayez dans le Snippet ci-dessous, en le survolant et en le quittant.
document.documentElement.addEventListener('mouseleave', () => console.log('out'))
document.documentElement.addEventListener('mouseenter', () => console.log('in'))- Réponses précédentes
- Plus de réponses
