Comment puis-je intercepter les frappes multitouches ?

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 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.

<div id="multitouche"></div>

$( "#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( event ){
	var objDataKey = $( "#multitouche" ).data( "key" );
	
	switch( event.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 ( event.shiftKey && event.ctrlKey && objDataKey.key80 ){
		console.log( "CTRL + SHIFT + P" );
	} else if ( event.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( event ){
	var objDataKey = $( "#multitouche" ).data( "key" );
 
	switch( event.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;
	}
});