Discussion :

[Kyusuke]

Bonjour, avant tout je tient à préciser que je suis débutant avec le langage Javascript et que je n'en maîtrise pas encore les subtilités.

Depuis deux jour, j'essaye de coder par mes propre moyen un petit programme Javascript.

En gros c'est: Event MouseDown déclenche Event MouseMove, mais stop quand Event MouseUp survient.

J'ai coder ceci par mes propres moyens (désolé pour les parenthèses et accolades mal gérés):

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
25
26
let xPredecent=0;
let yPrecedent=0;
 
let x=0;
let y=0;
 
 
const conteneur = document.getElementById('conteneur');
 
function mouse_down(){
  conteneur.addEventListener('mousedown', function(e){
  let xPrecedent=e.clientX;
  let yPrecedent=e.clientY;
  console.log("ActiveXDown  " + xPrecedent.toString());
  console.log("ActiveYDown  " + yPrecedent.toString());
 
  conteneur.addEventListener("mousemove", function(e){
  let x=e.clientX;
  let y=e.clientY;
  console.log("ActiveX2  " + x.toString());
  console.log("ActiveY2  " + y.toString());
  })}
  );
}
 
mouse_down();

J'ai donc déjà la partie qui déclenche un suivi de la position sur curseur uniquement lorsque la touche gauche de la souris est enfoncé. Mais ne n'arrive pas du tout à voire comment faire arrêter ce suivi de MouseMove quand la pression n'est plus donc quand MouseDown n'est plus et que MouseUp est utilisable.

J'ai essayé du break, du return, etc ... Mais rien n'y fait je n'y arrive pas.

Vos lumières sont la bienvenue pour me guider dans la résolution de ce problème.

Cordialement

[SpaceFrog]

à part mettre un exit conditionnel une ligne sur deux ...

[NoSmoking]

Bonjour,

Mais ne n'arrive pas du tout à voire comment faire arrêter ce suivi de MouseMove quand la pression n'est plus donc quand MouseDown n'est plus et que MouseUp est utilisable.

Il est une façon de faire qui utilise removeEventListener quand on en à plus besoin

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
function handleMouseDown(e) {
    // on affecte sur le DOWN
    oElem.addEventListener("mousemove", handleMouseMove, false);
    oElem.addEventListener("mouseup", handleMouseUp, false);
    // on fait ce que l'on a à faire
}
function handleMouseMove(e) {
    // on fait ce que l'on a à faire
}
function handleMouseUp(e) {
    // on désaffecte sur le MOVE et le UP
    oElem.removeEventListener("mousemove", handleMouseMove, false);
    oElem.removeEventListener("mouseup", handleMouseUp, false);
    // on fait ce que l'on a à faire
}
// on affecte l'événement DOWN au départ seul événement qui survit
oElem.addEventListener("mousedown", handleMouseDown, false);

C'est simplifié juste pour l'exemple, voilà un des intérêts de passer par des références à des fonctions.