Enfoncé un touche avec jquery [Résolu]

Messages postés
77
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
23 septembre 2019
- - Dernière réponse : rasielblas
Messages postés
77
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
23 septembre 2019
- 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.
Afficher la suite 

1 réponse

0
Merci
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/
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.
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).
rasielblas
Messages postés
77
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
23 septembre 2019
-
Ah bon, j'ai compris le principe du addEventListener, merci! votre explication est très claire, est vous avez raison, je dois me lancer dans l'étude du javascript après approfondir mes connaissances en jquery! je marque ce sujet comme résolu! est encore merci pour votre temps et votre aide! :-)
JQuery = JavaScript mais JQUery != JavaScript
rasielblas
Messages postés
77
Date d'inscription
jeudi 20 mars 2014
Statut
Membre
Dernière intervention
23 septembre 2019
-
Ok merci pour le précision :-)
Commenter la réponse de rateioun