web-dev-qa-db-fra.com

addEventListener pour une touche sur Canvas

J'essaie de créer une application de dessin qui réponde aux saisies au clavier et à la souris. J'ai ce code:

canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
    alert('mousedown');
        }, false);
canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

L'alerte 'mousedown' apparaît chaque fois que je clique sur la souris, mais l'alerte 'keydown' ne s'affiche jamais. Le même code fonctionne bien sur JS Bin: http://jsbin.com/uteha3/66/

Pourquoi ça ne marche pas sur ma page? Le canevas ne reconnaît-il pas la saisie au clavier?

javascripthtml5canvashtml5-canvas
47
Cbas

Edit - Cette réponse est une solution, mais une approche beaucoup plus simple et appropriée consisterait à définir le tabindex attribut sur l'élément canvas (comme suggéré par hobberwickey).

Vous ne pouvez pas focaliser un élément de toile. Un moyen simple de contourner ce problème serait de définir votre "propre" objectif.

var lastDownTarget, canvas;
window.onload = function() {
    canvas = document.getElementById('canvas');

    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);

    document.addEventListener('keydown', function(event) {
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

JSFIDDLE

51
Austin Brunkhorst

Définissez le tabindex de l'élément canvas sur 1 ou quelque chose comme ceci

<canvas tabindex='1'></canvas>

C'est un vieux truc pour rendre n'importe quel élément focalisable

99
hobberwickey