Détecter lorsque la souris ne bouge pas
-
03-07-2019 - |
Question
Je suis capable de trouver la position du curseur. Mais je dois savoir si la souris est stable. Si la souris n'a pas été déplacée pendant plus d'une minute, nous devons en avertir l'utilisateur.
Comment est-ce possible, y a-t-il des événements spéciaux pour cela? (Uniquement pour IE en javascript)
La solution
Définissez un délai d'expiration lorsque la souris est déplacée d'une minute dans le futur. Si la souris est déplacée, effacez le délai:
var timeout;
document.onmousemove = function(){
clearTimeout(timeout);
timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}
Autres conseils
N'y a-t-il pas moyen de configurer un minuteur pour qu'il commence à s'incrémenter après chaque événement de déplacement de la souris?
Si la minute est écoulée, ouvrez la boîte de message, mais chaque fois que la souris se déplace, le chronomètre se réinitialise.
Utilisez un timer qui réinitialise sa valeur sur l’événement mousemove. Si la minuterie atteint 1 minute - > Faites quelque chose.
Plus d'informations sur la minuterie , http: //www.w3schools .com / js / js_timing.asp
Et pour plus d'informations sur les événements de souris , http: //www.quirksmode .org / js / events_mouse.html
Oui, vous avez un événement onmousemove en Javascript. Pour obtenir ce dont vous avez besoin, il vous suffit de coder quelque chose comme ceci:
startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer
Vous pouvez par exemple l'utiliser sur la balise body body du document.
UPDATE: @Marius a réalisé un meilleur exemple que celui-ci.
Vous pouvez utiliser l'événement onmousemove. À l'intérieur, clearTimeout () et setTimeout (your_warning, 1 minute).
Vous pouvez utiliser ce script / extrait pour détecter la position du pointeur de la souris. et "rappelez-vous" il. Utilisez ensuite une minuterie " setTimeout (...) " Pour vérifier la position, disons chaque seconde et souvenez-vous de cette heure.
Si plus d'une minute s'est écoulée et que la position n'a pas changé, vous pouvez alerter l'utilisateur.
Voici une fonction unique permettant de vérifier le mouvement de tout élément:
function mouse (element, delay, callback) {
// Counter Object
element.ms = {};
// Counter Value
element.ms.x = 0;
// Counter Function
element.ms.y = function () {
// Callback Trigger
if ((++element.ms.x) == delay) element.ms.callback(element, element.ms);
};
// Counter Callback
element.ms.callback = callback;
// Function Toggle
element.ms.toggle = function (state) {
// Stop Loop
if ([0, "off"][state]) clearInterval(element.ms.z);
// Create Loop
if ([1, "on"][state]) element.ms.z = setInterval(element.ms.y, 1);
};
// Function Disable
element.ms.remove = function () {
// Delete Counter Object
element.ms = null; return delete element.ms;
};
// Function Trigger
element.onmousemove = function () {
// Reset Counter Value
element.ms.x = -1;
};
// Return
return element.ms;
};
Utilisation:
mouse (élément, delay, callback)
Exemples: Faire en sorte qu'un lecteur vidéo cache la souris après 5 secondes d'inactivité et de plein écran
let x = mouse(video, 5000, function (a) {
if (document.webkitIsFullScreen) video.style.cursor = "none";
});
x.toggle(1); addEventListener("mousemove", function () {
video.style.cursor = "auto";
});
AFK de la salle de conversation (45 secondes) (en supposant que vous disposiez d'une boîte de discussion et d'une fonction d'envoi de message):
let x = mouse(chatBox, (45e3), function (a) {
chatBox.send({ text: chatBox.username + " is AFK.", italic: true });
});
x.toggle(1); x.addEventListener("mousemove", function () {
chatBox.send({ text: chatBox.username + " is no longer AFK", italic: true });
});