Bloquer le scroll du navigateur [Résolu]

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"

11/02/2012, 13h56	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	Remplace tes break par des return false __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

11/02/2012, 14h07	#3
Jpa75 Nouveau Membre du Club Inscription : avril 2007 Messages : 80 Détails du profil Informations personnelles : Âge : 23 Informations forums : Inscription : avril 2007 Messages : 80 Points : 29 Points : 29	Je viens d'essayer, cela ne marche pas.
	00

11/02/2012, 18h56	#5
Jpa75 Nouveau Membre du Club Inscription : avril 2007 Messages : 80 Détails du profil Informations personnelles : Âge : 23 Informations forums : Inscription : avril 2007 Messages : 80 Points : 29 Points : 29	Ç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 =)
	00

11/02/2012, 19h23	#6
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 952 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 952 Points : 4 786 Points : 4 786	voir le tutoriel très complet, Les notions de flux et de propagation d'un événement.
	00

11/02/2012, 20h52	#7
Jpa75 Nouveau Membre du Club Inscription : avril 2007 Messages : 80 Détails du profil Informations personnelles : Âge : 23 Informations forums : Inscription : avril 2007 Messages : 80 Points : 29 Points : 29	Merci ! Je passe le statut à "résolu"
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email