2009-03-04 2 views
15

Sono in grado di trovare la posizione del cursore. Ma ho bisogno di scoprire se il mouse è stabile. Se il mouse non è stato spostato per più di 1 minuto, dobbiamo avvisare l'utente.Rilevamento quando il mouse non si muove

Come è possibile, ci sono eventi speciali per questo? (Solo per IE in javascript)

risposta

36

impostare un timeout quando il mouse viene spostato uno minuti nel futuro, e se si sposta il mouse, deselezionare il timeout:

var timeout; 
document.onmousemove = function(){ 
    clearTimeout(timeout); 
    timeout = setTimeout(function(){alert("move your mouse");}, 60000); 
} 
+0

vedo un potenziale problema: Ogni chiamata a setTimeout restituisce un numero di contatore.Quando si avvolgerà e cosa succederà allora? Suggerisco invece un setInterval (update, 1000), dove 'update' incrementa una variabile che l'evento onmousemove ripristina. Se la variabile supera 60 in aggiornamento, avvisa l'utente – some

+2

A a testa alta, questo non funziona più in Chrome – Jay

+2

@Jay funziona per me –

1

Non c'è un modo per impostare un timer per iniziare l'incremento dopo ogni evento di movimento del mouse?

Se arriva a un minuto, fare clic sulla casella dei messaggi, ma ogni volta che il mouse si sposta il timer viene ripristinato.

0

È possibile utilizzare l'evento onMouseMove. Al suo interno, clearTimeout() e setTimeout (your_warning, 1 minuto).

0

È possibile utilizzare this script/snippet per rilevare la posizione del puntatore del mouse e "ricordarlo". Quindi usa un timer "setTimeout (...)" per controllare la posizione diciamo ogni secondo e ricorda quella volta.

Se è trascorso più di un minuto e la posizione non è cambiata, è possibile avvisare l'utente.

1

Sì, avete un evento onmousemove in Javascript, in modo da ottenere ciò che hai bisogno devi solo fare codice come questo:

startTimer(); 
element.onmousemove = stopTimer(); //this stops and resets the timer 

Puoi usarlo sul tag del corpo del documento per esempio.

AGGIORNAMENTO: @Marius ha ottenuto un esempio migliore di questo.

0

Ecco una funzione one-and-fatto 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(element, delay, callback)

Esempi: Fai un lettore video nascondere il mouse dopo 5 secondi 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 si dispone di una casella di chat e una funzione di messaggio di invio):

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 }); 
});