Rilevare quando il mouse non si muove
-
03-07-2019 - |
Domanda
Sono in grado di trovare la posizione del cursore. Ma devo scoprire se il mouse è stabile. Se il mouse non è stato spostato per più di 1 minuto, dobbiamo avvisare l'utente.
Com'è possibile, ci sono eventi speciali per questo? (Solo per IE in javascript)
Soluzione
Imposta un timeout quando il mouse viene spostato di un minuto nel futuro e, se il mouse viene spostato, cancella il timeout:
var timeout;
document.onmousemove = function(){
clearTimeout(timeout);
timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}
Altri suggerimenti
Non esiste un modo per impostare un timer per iniziare l'incremento dopo ogni evento di movimento del mouse?
Se arriva a un minuto, fai apparire la finestra di messaggio, ma ogni volta che il mouse si sposta il timer viene resettato.
Usa un timer che reimposta il suo valore sull'evento mousemove. Se il timer raggiunge 1 minuto - > Fai qualcosa.
Ulteriori informazioni su timer qui http: //www.w3schools .com / js / js_timing.asp
E maggiori informazioni sugli eventi mouse catchin qui http: //www.quirksmode .org / js / events_mouse.html
Sì, hai un evento onemaemove in Javascript, quindi per ottenere ciò di cui hai bisogno devi solo fare un codice simile a questo:
startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer
Puoi usarlo sul tag body del documento per esempio.
AGGIORNAMENTO: @Marius ha ottenuto un esempio migliore di questo.
Puoi usare l'evento onmousemove. Al suo interno, clearTimeout () e setTimeout (your_warning, 1 minuto).
Puoi utilizzare questo script / snippet per rilevare la posizione del puntatore del mouse e " ricordare " esso. Quindi utilizza un timer " setTimeout (...) " per controllare la posizione diciamo ogni secondo e ricordiamo quella volta.
Se è trascorso più di un minuto e la posizione non è cambiata, è possibile avvisare l'utente.
Ecco una funzione completa che può controllare qualsiasi elemento per il movimento:
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;
};
Utilizzo:
mouse (elemento, ritardo, richiamata)
Esempi: Fai nascondere il mouse a un lettore video dopo 5 secondi quando è inattivo e a schermo intero
let x = mouse(video, 5000, function (a) {
if (document.webkitIsFullScreen) video.style.cursor = "none";
});
x.toggle(1); addEventListener("mousemove", function () {
video.style.cursor = "auto";
});
Chat room AFK (45 secondi) (supponendo che tu abbia una finestra di chat e una funzione di invio messaggio):
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 });
});