Detectando cuando el mouse no se mueve.
-
03-07-2019 - |
Pregunta
Soy capaz de encontrar la posición del cursor. Pero necesito averiguar si el ratón es estable. Si el mouse no se movió por más de 1 minuto, entonces debemos alertar al usuario.
¿Cómo es posible, hay algún evento especial para esto? (Solo para IE en javascript)
Solución
Establezca un tiempo de espera cuando el mouse se mueva un minuto en el futuro y, si se mueve el mouse, borre el tiempo de espera:
var timeout;
document.onmousemove = function(){
clearTimeout(timeout);
timeout = setTimeout(function(){alert("move your mouse");}, 60000);
}
Otros consejos
¿No hay una manera de configurar un temporizador para que comience a incrementarse después de cada evento de movimiento del mouse?
Si llega a un minuto, aparece el cuadro de mensaje, pero cada vez que el mouse se mueve, el temporizador se reinicia.
Use un temporizador que restablezca su valor en el evento mousemove. Si el temporizador llega a 1 minuto - > Haz algo.
Más información sobre temporizador aquí http: //www.w3schools .com / js / js_timing.asp
Y más información sobre eventos catchin mouse aquí http: //www.quirksmode .org / js / events_mouse.html
Sí, tienes un evento onmousemove en Javascript, así que para lograr lo que necesitas solo tienes que codificar algo como esto:
startTimer();
element.onmousemove = stopTimer(); //this stops and resets the timer
Puedes usarlo en la etiqueta del cuerpo del documento, por ejemplo.
ACTUALIZACIÓN: @Marius ha logrado un mejor ejemplo que este.
Puedes usar el evento onmousemove. Dentro de él, clearTimeout () y setTimeout (your_warning, 1 minuto).
Puede usar este script / fragmento de código para detectar la posición del puntero del mouse y " recuerda " eso. Luego use un temporizador " setTimeout (...) " para verificar la posición digamos cada segundo y recordemos ese tiempo.
Si pasaron más de un minuto y la posición no ha cambiado, podría alertar al usuario.
Aquí hay una función de un solo hecho que puede verificar cualquier elemento para el movimiento:
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;
};
Uso:
mouse (elemento, retraso, devolución de llamada)
Ejemplos: Hacer que un reproductor de video oculte el mouse después de 5 segundos cuando está inactivo y en pantalla completa
let x = mouse(video, 5000, function (a) {
if (document.webkitIsFullScreen) video.style.cursor = "none";
});
x.toggle(1); addEventListener("mousemove", function () {
video.style.cursor = "auto";
});
Sala de chat AFK (45 segundos) (suponiendo que tenga un cuadro de chat y una función de envío de mensajes):
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 });
});