IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ jQuery

FAQ jQueryConsultez toutes les FAQ

Nombre d'auteurs : 12, nombre de questions : 46, dernière mise à jour : 15 juin 2021 

 
OuvrirSommaireLa gestion des évènements

[jQuery 1.4.2]

Si la partie mouseenter (mouseover) déclenche la partie mouseleave (mouseout) c'est bien normal, car les événements se bousculent.

Exemple :

 
Sélectionnez
$("#imgID").hover(
 function(){
  $(this).fadeOut("slow");
 },
 function(){
  $(this).fadeIn("slow");
 }
);



Un fadeOut() ou un animate({opacity : 0}) se traduit par un display: none qui provoque un événement mouseleave(mouseout).
Un fadeIn() ou un animate({opacity: 1}) se traduit par un display: block qui provoque un événement mouseenter(mouseover).

Créé le 1er février 2011  par danielhagnoul

[jQuery 1.5.2]

Les événements clavier (keydown, keyup) gèrent la frappe d'une seule touche. Pour détecter des combinaisons de touches, on doit stocker le fait que l'utilisateur garde une ou des touches enfoncées et tenir compte du relâchement des touches.

Nous avons donc besoin d'une série de booléens, un par touche surveillée, qui indique (true) si la touche est enfoncée. On passera donc le booléen à true sur l'événement keydown et à false sur l'événement keyup.

Pour une frappe multitouche incorporant une ou plusieurs touches spéciales on doit se servir de : ctrlKey, shiftKey, altKey ou metaKey (recommandation W3C DOM level 2).

On stockera les données dans l'espace data(), voir : http://api.jquery.com/data/data

Pour ne pas surcharger $("body").data() et éviter une collision de noms, on doit stocker les données dans l'élément du DOM où l'action s'appliquera. Dans cet exemple, il s'agit de la division d'ID "multitouche".

Nota bene

  • Si l'on souhaite gérer la frappe d'une touche et la frappe de cette touche en combinaison avec une autre, on doit bien prendre en compte que les deux événements se produiront (flèche gauche seule et flèche gauche plus flèche haut dans l'exemple).
  • Si l'utilisateur garde la ou les touches enfoncées, l'événement se répète à une vitesse qui dépend du navigateur utilisé.
  • L'exemple montre comment intercepter les keyEvents, mais il vous appartient de mettre au point la logique d'utilisation en fonction de vos besoins.


Exemple (testé avec succès sous IE9, F4 et C10) :

 
Sélectionnez
<!-- on stockera les événements key dans le data() de la division multitouche -->
<div id="multitouche"></div>
 
Sélectionnez
$(function(){
		$("#multitouche").data("key", {
			key37: false, // flèche gauche
			key38: false, // flèche haut
			key39: false, // flèche droite
			key40: false,  // flèche bas
			key80: false   // touche p
		});
 
		$(document).keydown(function(e){
			var objDataKey = $("#multitouche").data("key");
 
			switch(e.which){
				case 37:
					objDataKey.key37 = true;
					break;
				case 38:
					objDataKey.key38 = true;
					break;
				case 39:
					objDataKey.key39 = true;
					break;
				case 40:
					objDataKey.key40 = true;
					break;
				case 80:
					objDataKey.key80 = true;
					break;
			}
 
			if (e.shiftKey && e.ctrlKey && objDataKey.key80){
				console.log("CTRL + SHIFT + P");
			} else if (e.ctrlKey && objDataKey.key37){
				console.log("CTRL plus flèche gauche");
			} else if (objDataKey.key37 && objDataKey.key38){
				console.log("flèche gauche plus flèche haut");
			} else if (objDataKey.key37){
				console.log("flèche gauche");
			} else if (objDataKey.key39){
				console.log("flèche droite");
			} else if (objDataKey.key38){
				console.log("flèche haut");
			} else if (objDataKey.key40){
				console.log("flèche bas");
			}
 
			/*
			 * Indispensable pour bloquer
			 * l'action par défaut et la propagation
			 * de l'événement si on utilise une combinaison
			 * multitouche qui provoque une action
			 * du navigateur.
			 *
			 * CTRl+SHIFT+P provoque le passage en
			 * navigation privée sous IE9 et F4.
			 */
			return false;
		});
 
		$(document).keyup(function(e){
			var objDataKey = $("#multitouche").data("key");
 
			switch(e.which){
				case 37:
					objDataKey.key37 = false;
					break;
				case 38:
					objDataKey.key38 = false;
					break;
				case 39:
					objDataKey.key39 = false;
					break;
				case 40:
					objDataKey.key40 = false;
					break;
				case 80:
					objDataKey.key80 = false;
					break;
			}
		});
	});
Créé le 30 mai 2011  par danielhagnoul, SpaceFrog, nico78200

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.