Détection d'un événement clé lorsque la souris survole l'élément DOM

Question

Je sais comment détecter les événements clés sur le document. Je sais également comment détecter les événements mousemove dans un élément DOM.

Mais je ne sais pas comment détecter un événement clé quand il survient avec la souris sur un élément et la souris ne bouge pas.

Je suppose que je pourrais définir un booléen qui sera mis à true par mousemove un à false par mouseout sur l'élément DOM. Mais existe-t-il un moyen plus approprié de le faire?

J'ai trouvé une question qui est directement pertinent, mais sans réponse (et les commentaires ne pas vraiment aider):

Detect shift key while already over element

Answer 1

Voici une extension de mon commentaire ci-dessus. En utilisant vanilla JavaScript, vous pouvez définir des écouteurs d'événement sur un élément pour onmouseover et onmouseleave. Ces écouteurs d'événement bascule une variable booléenne, qui est juste un drapeau pour dire si la souris est actuellement sur l'élément ou non.

Ajoutez ensuite un autre écouteur d'événement sur la fenêtre pour les pressions sur les touches. En appuyant sur la touche, si notre booléen est vrai, alors lancez votre code, si ce n'est pas le cas, ne faites rien.

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

est ici le violon: https://jsfiddle.net/6wpeLbx9/ (note: l'objet de la fenêtre dans le violon est juste le panneau contenant le carré rouge - pour que les presses clés pour être remarqué, vous devez d'abord cliquer sur le panneau pour focaliser)

Je suis sûr que mon code peut être plus concis ...

Hope that helps!