Capture de touches

Version imprimable

30/04/2011, 17h57
Supertoaster

Capture de touches

Bonjour à tous,

Je suis en train de développer une petite application JS, dans un canvas ; c'est un jeu dans lequel un personnage est contrôlé par les touches directionnelles du clavier.
Seulement voilà, la page étant trop grande pour être affichée dans son intégralité, un appui sur les touches haut ou bas provoque en même temps le défilement de la page, ce qui devient agaçant à la longue. Auriez-vous une idée de la façon dont je pourrais m'y prendre, pour empêcher ces touches d'avoir un autre effet que de diriger le personnage ?

Je vous remercie à l'avance pour vos précieuses réponses !
30/04/2011, 18h05
supersnail

Bonjour,

Tu peux rajouter un

Code:

return false;

à la fin de ta fonction qui gère l'évènement clavier.

Merci ! Je l'ajoute comme ceci ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function Personnage(...) {...
 
this.keyPress = function (_this,e) {
        switch(e.keyCode){
            case left:
                _this.setDirection(1);
                break;
            case up:
                _this.setDirection(2);
                break;
            case right:
                _this.setDirection(3);
                break;
            case down:
                _this.setDirection(4);
                break;
            default:
                break;
        }
        return false;
    }
 
    var This = this;
    addListener(document, "keydown", function(e) { This.keyPress(This,e);});
 
}

J'ai une sous-classe Personnage, dans laquelle j'ai rajouté un listener que va décortiquer la fonction "keypress".

J'ai rajouté cette ligne, mais la page s'agite toujours... Une idée ?

30/04/2011, 18h13
supersnail

Avec

Code:

addListener(document, "keydown", function(e) { This.keyPress(This,e);return false;});

, ça donne quoi?
30/04/2011, 18h18
Supertoaster

Flûte... Ça défile toujours. Que ce soit dans la fonction à l'intérieur du addListener, dans la fonction addListener elle-même ou dans la fonction keypress, l'ajout de "return false" à la fin ne change rien.
A quel niveau les touches directionnelles sont-elles interprétées par le navigateur, pour le défilement ? Avant ou après l'event ?
30/04/2011, 19h45
NoSmoking
Bonjour,
il faut éviter que l'événement ne se propage
donc ajouter en fin de fonction un truc du style
Code:

1 2 3 4 5 6 7 8 if( event.preventDefault){ event.preventDefault(); event.stopPropagation(); } else{ event.returnValue = false; event.cancelBubble = true; }
[edit]
perso j'utiliserai keypress avec event.keyCode
[/edit]