Enfoncé un touche avec jquery

Résolu/Fermé

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 20 mai 2019 à 14:00
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 29 mai 2019 à 09:37

Bonjour,

En fessant des recherches sur certain forum je n'ai pas eu un résultat et m'a permis de postuler ce sujet, en fait j'aimerais savoir comment fait-on pour que lorsqu'on clique sur la touche gauche du souris alors la touche shift est enfoncé en même temps.
Voici mon code, elle fonctionne sauf que le touche shift n'est pas enfoncé:

if (e.keyCode == 16) {
	$('.ui-wrapper').css("background","green");
		console.log("touche shift est appuyé");
									
		}
	else{
		$('.ui-wrapper').css("background","red");
			}
		console.log(e);
	});

	var e = $.Event("keydown", {
			keyCode: 16
		});
									
		$('.ui-icon-gripsmall-diagonal-se').mousedown(function() {
			$(".mediaPV").trigger(e);
		});

Ce que je veux c'est quelque chose du genre
si touche gauche de la souris est enfoncé alors elle déclenche la combinaison de touche clique gauche de souris + touche shift enfoncé.

Merci de votre collaboration.

A voir également:

Enfoncé un touche avec jquery
Touche rémanente - Guide
Touche insert - Guide
Quelle touche pour réinitialiser un ordinateur ? - Guide
Quelle touche pour débloquer la souris ? - Guide
Touche del ✓ - Forum Clavier

1 réponse

Réponse 1 / 1

rateioun
Modifié le 20 mai 2019 à 16:11

Salut,
une solution simple et efficace(j'en connais pas vraiment d'autre) est d'enregistrer l'état de la touche enfoncée, le désactiver lorsque celle ci est relevée.
Par exemple(j'utilise vanilla.js le meilleur framework JavaScript http://vanilla-js.com/ ):

let inputStates={
mouseclick : null,
shift:null
};

function checkClickAndShift(){
if(inputStates.mouseclick===true && inputStates.shift===true){
alert('click et shift sont enfoncés');
}
}
document.addEventListener('mousedown', function(e){inputStates.mouseclick=true;});
document.addEventListener('mouseup', function(e){inputStates.mouseclick=false;});

document.addEventListener('keydown' , function(e){
if(e.keyCode===16){
inputStates.shift=true;
//-- ici j'ai respecté votre contrainte: devoir d'abord enfoncer le clic souris
checkClickAndShift();
}
});

document.addEventListener('keyup' , function(e){
if(e.keyCode===16){
inputStates.shift=false;
}
});

encore mieux on pourrais imaginer changer la configuration des touches en ayant les états de input associé à leur code (.keyCode).
un exemple qui vient d'un script que j'ai fait :

/** INPUTs MANAGEMENT : Controls (keyboard) */
function Controls(id){//-- utilise un objet en notation littérale
return{
id:id,
input:{
states:{},
keys:{
up:38,
down:40,
right:39,
left:37,
// enter:13,
shoot:32
}
}
}
}
//-- puis on contrôle les états des touches en fonction des valeurs de l'objet Controls

let ctrls = Controls('controler');
document.addEventListener('keydown', function(e){
//alert(e.keyCode);
switch(e.keyCode){
case ctrls.input.keys.up: ctrls.input.states['up']=true; break;
case ctrls.input.keys.right: ctrls.input.states['right']=true; break;
case ctrls.input.keys.down: ctrls.input.states['down']=true; break;
case ctrls.input.keys.left: ctrls.input.states['left']=true; break;
case ctrls.input.keys.shoot: ctrls.input.states['shoot']=true; break;
default:/* no assigned control, do nothing*/;
break;
}
console.log('states\n up:'+ctrls.input.states.up+'\t right:'+ctrls.input.states.right+'\t down:'+ctrls.input.states.down+'\t left:'+ctrls.input.states.left);
});
document.addEventListener('keyup', function(e){
switch(e.keyCode){
case ctrls.input.keys.up:if(isReal(ctrls.input.states['up'])){ctrls.input.states.up=false;} break;
case ctrls.input.keys.right:if(isReal(ctrls.input.states['right'])){ctrls.input.states.right=false;} break;
case ctrls.input.keys.down:if(isReal(ctrls.input.states['down'])){ctrls.input.states.down=false;} break;
case ctrls.input.keys.left:if(isReal(ctrls.input.states['left'])){ctrls.input.states.left=false;} break;
case ctrls.input.keys.shoot:if(isReal(ctrls.input.states['shoot'])){ctrls.input.states.shoot=false;} break;
default:/** DO NOTHING */;break;
}
});

Ici un site intéressant qui donne les équivalents JS/JQuery:

http://youmightnotneedjquery.com/

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
21 mai 2019 à 10:36

Merci de m'avoir répondu, après avoir fait analyse à votre code, le premier me vas très bien:

let inputStates={
mouseclick : null,
shift:null
};

function checkClickAndShift(){
if(inputStates.mouseclick===true && inputStates.shift===true){
alert('click et shift sont enfoncés');
}
}
document.addEventListener('mousedown', function(e){inputStates.mouseclick=true;});
document.addEventListener('mouseup', function(e){inputStates.mouseclick=false;});

document.addEventListener('keydown' , function(e){
if(e.keyCode===16){
inputStates.shift=true;
//-- ici j'ai respecté votre contrainte: devoir d'abord enfoncer le clic souris
checkClickAndShift();
}
});

document.addEventListener('keyup' , function(e){
if(e.keyCode===16){
inputStates.shift=false;
}
});

Mais j'aimerais savoir s'il est possible de faire un trigger avec ce code, c'est à dire que lorsque je clique sur la touche droite du souris alors cela déclenche la function checkClickAndShift() ?? sans avoir à taper le touche shift c'est possible??

rateioun
Modifié le 21 mai 2019 à 13:26

oui mais ce n'était pas votre question. Aucun soucis si vous avez compris ma réponse.
Sinon apprenez les principes de la programmation événementielle , avec JavaScript utilisant la méthode .addEventListener (dont .click ou autres équivalents JQuery sont tirés comme indiqués dans les liens fournis).

Pour détailler dans mon exemple un objet contient les états de la touche et du bouton.
Ces états(outre null) peuvent être false ou true. Le progamme définit à true l'état de la touche ou bouton enfoncée, false lorsque celui ci est relevé(voir keyup, keydown, mouseup, mousedown qui sont appelés trigger ou en français approximatif 'déclencheur' de l'événement).
La fonction checkClickAndShift ne fait que vérifier ces états et est donc indépendante des événements puisque reliée à l'objet qui contient les états, ç.à.d. on l'utilise où et quand(lors de l'événement voulu) on veut.

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
Modifié le 22 mai 2019 à 10:07

Encore merci pour votre temps et votre réponse, après avoir fait plusieurs test sur votre code je crois que je comprend un peu le principe mais que je me suis encore perdu alors que le documentation que vous m'avez envoyé est assez complet, en fait lorsque je lance le programme alors le message alert('click et shift sont enfoncés'); ne déclenche pas si je n'appuie pas sur shift manuellement, j'ai aussi lu le documentation mais je ne comprend pas vraiment comment déclencher le shift enfoncé sans avoir à cliquer sur le boutton shift, pouvez vous me donner le code de l'évènement lorsque je clique sur le boutton droite alors le shift déclenche en même temps, pardonne moi pour mon incompétence car je ne suis pas vraiment expert dans le domaine et sollicite votre aide :-)

Ce qui me manque c'est le fait que l'ors du chargement du script alors la touche shift enfoncé est tout de suite enregistré dans l'évènement addEventListener sans que j’appuie sur le touche shift, et qu'il me suffit de l'appeler comme vous l'avez fait!

En fait j'aimerais avoir quelque chose du genre:

e = jQuery.Event( "keypress", { keyCode: 16 } );
	e.which = 16 //choose the one you want
		$(".mediaPV").keypress(function(){
												
			if(e.keyCode===16){
				alert("La touche shift est activé");
			}
			else{
				alert("La touche shift n'est pas activé");
										}
				 //alert('keypress triggered')
		}).trigger(e)

Mais avec votre version qui est le touche shift enfoncé.

rateioun
23 mai 2019 à 17:28

hé bien supprimez le et n'utilisez que le clic si c'est ce que vous voulez. Vous n'avez pas besoin d'une variable (dans l'objet inputStates) pour enregistrer cela... il s'agit simplement de la méthode .click() en JQuery! Il n'y a rien a enregistrer d'ailleurs il me semble.

'la touche shift enfoncé est tout de suite enregistré dans l’événement addEventListener '
Un événement n'enregistre rien, sauf si on l'indique soi même.
Pour info un événement peut être considéré comme un objet, donc avec certains attributs-variables internes à l'objet- et disparaissent lorsque l'on sort du 'scope' de l'utilisation de celle ci(ici la fonction en 2nd paramètre de la méthode .addEventListener).

Plutôt que d'utiliser JQuery que vous ne comprenez pas plutôt utilisez JavaScript et cherchez à comprendre le fonctionnement(JQuery = un fichier JavaScript standardisé).
Le moyen simple que je vous ait indiqué c'est de consulter le manuel technique, comme pour tout outil...

Vous parlez du clic uniquement mais votre code utilise la touche du clavier 16(shift je suppose). Changez simplement cela pour avoir l’événement (donc script via une fonction appliquée lors de cet événement).

Bref si vous devez utiliser la touche shift il faut indiquer celle ci, si vous devez utiliser le clic de la souris utilisez celui-ci...

Que dire d'autre. Le fait que vous n'ayez pas compris m'incite à vous proposer de revoir vos connaissances en JavaScript que ce soit la théorie/principe comme les bases pratiques pour utiliser les fonctions qui y sont reliées(plus que le manuel de ces fonctions je peut rien dire, si vous les comprenez pas essayez encore).

Bref je ne peut pas vous donner d'autres explications que l'utilisation de la méthode .addEventListener qui permet les mêmes choses en notations plus courtes avec JQuery. Après si vous ne comptez pas apprendre JavaScript il serait plus sage de renoncer à en écrire.

rateioun
23 mai 2019 à 17:35

pour rappel... et qui est déjà présent et dans votre programme et dans l'exemple que je vous ai donné:

//-- détection d'un événement avec un écouteur
element.addEventListener('click', function(){/** faire quelque chose lors de l'événement*/}, false);

//-- identique en JQuery
$element.click(function(){/** faire quelque chose lors de l'événement*/});

/**  bien sûr element et $element se réfère au sélecteur DOM l'un en JS l'autre en JQuery */

Voir donc le manuel d'utilisation de soit addEventListener
soit celui de JQuery pour la méthode .click pour peu que vous compreniez les mécanismes de bases de JavaScript(les fonctions l'objet et les événements).

Discussions similaires

Touches majuscule et minuscule inversées sur mon clavier

Touche "home" sur pc portable.

La touche Alt Gr ne fonctionne plus sur mon clavier

Absence de touche "fn" que faire?

Désactiver une touche du clavier : possible ?

Discussions similaires

Newsletters