Erkennen, wenn sich die Maus tatsächlich bewegt, nicht nur wenn sich die Seite bewegt

Question

Ich habe ein ziemlich großes Problem beim Versuch, die Navigation auf meiner Seite zu erstellen. Wenn die Maus ein Element eingibt, wird es ausgewählt, und wenn Sie die Pfeiltasten verwenden, werden die Elemente ausgewählt, die sich auf das ausgewählte Element beziehen. Dies ist jedoch ein Problem, wenn die Pfeiltasten zum Blättern der Seite führen, da (abhängig von der Position der Maus) das entsprechende Element ausgewählt wird und dann sofort das Element ausgewählt wird, mit dem die Maus nach dem Verschieben der Seite verbunden ist (selbst wenn Sie dies getan haben) Bewege die Maus nicht.

Kann jemand dieses Problem beheben? Ich habe versucht, daran herumzubasteln, aber keine meiner Lösungen schien zu funktionieren. Jede Hilfe wird geschätzt, danke.

Answer 1

Es klingt wie Sie sollten die „wählen, wenn die Maus betritt“ binden Ereignis auf mousemove und Dieses Ereignis auf mousestop entbinden. mousestop existiert nicht alleine, also müssen Sie es irgendwie erstellen oder ein Plugin verwenden (es gibt mindestens ein paar da draußen wie https://github.com/richardscarrott/jquery-mousestop-event/). Ich denke, das wäre die einfachste Lösung, aber Ihre Benutzeroberfläche scheint etwas bizarr (Sie möchten die Pfeiltaste normalerweise die Seite scrollen und "Wählen Sie ein Element, das möglicherweise größer als die Größe der Rolle ist?)

Answer 2

Try falsch aus dem Handler Tastaturereignis zurückkehren, wo Sie Pfeiltasten überprüfen:

element.onkeypress = function(ev) { 
    // ... 
    return false; 
} 

Dies wird das „Standardverhalten“ verhindern, dass der Browser für die Veranstaltung hat, die blättern ist. Dies gilt auch für Links, zum Beispiel: Wenn Sie false von einem click Event-Handler für einen Link zurückgeben, wird der Link nicht automatisch folgen.

Answer 3

nicht sicher, ob ich völlig verstehen, aber man sollte eine Kombination der mousemove und keypress Veranstaltungen nutzen können:

$("#element").mousemove(function(e){ 
    alert("mouse moved"); 
}); 

$("#element").keypress(function(e){ 
    if (e.keyCode == 38 || e.keyCode == 40){ //up & down arrow keys 
     e.preventDefault(); 
    } 
});