Bloquer le scroll du navigateur

**Jpa75** · 11/02/2012, 13h41

Bonjour !

J'ai développer un petit taquin en javascript
(http://fr.wikipedia.org/wiki/Taquin pour ce qui ne connaîtrai pas) mais j'ai un petit souci.

Celui-ci fonctionne très bien mais je fais utiliser les flèches du clavier à l'utilisateur.
Le problème c'est que les flèches du haut et du bas font bouger la scrollbarre du navigateur (logique) en même temps que les pièces de mon taquin.

J'aimerais savoir si je pouvais, en javascript, interrompre l'ordre de scroll envoyé au navigateur ? S'il existait un moyen d'empecher le navigateur de scroll lors de l'appui sur les flèches..

Voici mon code de capture des évènements :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="Enigmes/1/traitementJSLaby.js"></script>
	<script language="javascript">
		function detectKey(Event) { 
			if(Event==null) {
				Event=event; 
			}
			kc = Event.keyCode; 
			if (!kc) 
			kc = Event.wich; 
			switch (kc) { 
				case 37: deplacerAGauche(); break; 
				case 38: monterUneCase(); break; 
				case 39: deplacerADroite(); break; 
				case 40: descendreUneCase(); break; 
				default: return; 
			} 
 
		} 
	</script> 
	<title>1ère énigme</title>
</head>
<body onkeydown="javascript:detectKey(event);">

Merci d'avance pour votre aide !

Cordialement,

Mister Jpa

**Bovino** · 11/02/2012, 13h56

Remplace tes break par des return false

**Jpa75** · 11/02/2012, 14h07

Je viens d'essayer, cela ne marche pas.

**NoSmoking** · 11/02/2012, 17h43

Bonjour,
est en stoppant la propagation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function detectKey(Event) {
  if (Event == null) {
    Event = event;
  }
  kc = Event.keyCode;
  if (!kc) kc = Event.wich;
  switch (kc) {
    case 37: deplacerAGauche(); break;
    case 38: monterUneCase();   break;
    case 39: deplacerADroite(); break;
    case 40: descendreUneCase();break;
    default:  return true;
  }
  // stopper la propagation
  if( Event.preventDefault){
    Event.preventDefault();
    Event.stopPropagation();
  }
  else{
    Event.returnValue = false;
    Event.cancelBubble = true;
  }
  return false;
}

**Jpa75** · 11/02/2012, 18h56

Ça marche niquel !

Pour l'explication, Javascript catch tout les évènements avant le navigateur, et le stopPropagation() permet d'empecher que l'évènement n'arrive au navigateur ?

C'est bien ça?

Merci en tout cas =)

**NoSmoking** · 11/02/2012, 19h23

voir le tutoriel très complet, Les notions de flux et de propagation d'un événement.

**Jpa75** · 11/02/2012, 20h52

Merci !

Je passe le statut à "résolu"

Bloquer le scroll du navigateur

JavaScript

Discussions similaires

Partager

Partager