während die Maus über das DOM-Element

Ich weiß, wie die wichtigsten Ereignisse auf dem document zu erkennen. Ich kann auch mousemove Ereignisse in einem DOM-Element erkennen.während die Maus über das DOM-Element

Aber ich weiß nicht, wie man ein Schlüsselereignis erkennt, wenn es mit der Maus über ein Element passiert und die Maus es nicht bewegt.

Ich denke, ich könnte einen Boolean setzen, der von mousemove auf 0 von mouseout auf dem DOM-Element auf True festgelegt wird. Aber gibt es einen geeigneteren Weg, dies zu tun?

Ich habe eine Frage gefunden, die direkt relevant ist aber offen (und die Kommentare helfen nicht wirklich):

Detect shift key while already over element

Quelle

2017-03-28 Daniel

Haben Sie versucht, einen Ereignis-Listener für ein Schweben über das Element einstellen und dann im Innern des Hover-Ereignis-Listener den Tastendruck-Ereignis-Listener mit? –

Wenn dieses Projekt für jedes Publikum anders als selbst bestimmt ist, bitte die Zugänglichkeit Auswirkungen zu berücksichtigen. Dies ist eine unmögliche Aufgabe für Screenreader und Nicht-Maus-Interfaces. Es ist auch schwierig, dem Benutzer die Affordanz zu vermitteln. –

@JoeFrambach, es ist nicht unser Platz den Anwendungsfall für eine Frage zu prüfen, es sei denn, es für etwas illegal ist. Was, wenn er zufällig versucht, diese Mechanik für ein Spiel anstelle einer Website zu benutzen? Nicht alles ist immer dazu gedacht *** zu sein oder auch nur *** für jeden zugänglich zu sein. – Ryan

Hier ist eine Erweiterung meines Kommentars oben.

Mit Vanille JavaScript Sie Ereignis-Listener auf einem Element für Onmouseover und OnMouseLeave einstellen. Diese Ereignis-Listener schalten eine boolesche Variable um, die nur ein Flag ist, um zu sagen, ob die Maus gerade über dem Element ist oder nicht.

Dann einen anderen Ereignis-Listener auf dem Fenster für Tastendrücke hinzuzufügen. Wenn der Boolesche Wert wahr ist, führen Sie den Code aus, wenn nicht, tun Sie nichts.

var mouseOn = false; 

document.getElementById('div').onmouseover = function() { 
    console.log('mouseover'); 
    mouseOn = true; 
} 

document.getElementById('div').onmouseleave = function() { 
    console.log('mouseleave'); 
    mouseOn = false; 
} 

window.onkeypress = function(e) { 
    if(mouseOn == true) { 
    console.log(e.key) 
    } 
}

Hier ist die Geige: https://jsfiddle.net/6wpeLbx9/ (Anmerkung: das Fenster-Objekt in der Geige nur das Panel ist das rote Quadrat enthält - für Tastendrücke, um bemerkt zu werden, müssen Sie zuerst auf dem Panel klicken, um es zu konzentrieren)

ich bin sicher, dass mein Code prägnanter sein kann ...

Hoffnung, das hilft!

Quelle

2017-03-29 15:51:24

während die Maus über das DOM-Element

Antwort

Verwandte Themen