Discussion :

[Couin]

Coucoutte

J'utilise un événement "onclick" qui déclenche une fonction.

Un malencontreux double-clic déclenche 2 fois la fonction.

Du coup, j'ajoute un événement "ondblclick" qui déclenche une fonction bidon qui ne fait rien.

Malheureusement, cela ne résout pas le problème

Une tite idée ? Sachant que je ne souhaite pas désactiver la possibilité de double clic (car sur une autre page, j'utilise onclick pour une fonction et ondblclick pour une autre fonction) ?

Merkouin et à bientôt !
Couin

[SpaceFrog]

Avec Jquery il y a once() qui limite l'évènement à une seul occurrence.
Tu peux mettre un flag boolean dans ton évènement onclick le basculer à true sur le premier click puis le tester pour sortir ou non de la fonction

[Doksuri]

si tu veux le faire en JS natif, c'est l'option once:true qu'il faut rajouter a ton event

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

tonElement.addEventListener('click', () => { /*ton traitement*/ }, {once:true});

si tu veux laisser la possibilite au l'utilisater de cliquer (plus tard dans le temps), tu peux setter un flag avec un timer

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="test">click me</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
let canClick = true;
let count = 0;
 
document.getElementById('test').addEventListener('click', () => {
 if(canClick) {
   canClick = false;
   console.log('ok', ++count);
   setTimeout(() => {
   	canClick = true;
   }, 1E3);//on laisse 1seconde
	}
});

[SpaceFrog]

J'en apprends encore tous les jours en js pur ...
Merci Dok

[jreaux62]

Bonjour,
ne connaissant pas once:true non plus, je me suis intéressé à la discussion

1- once:true : selon la doc :

once
Un booléen (Boolean) indiquant que listener doit être invoqué au plus une fois après avoir été ajouté.
Si true (vrai), listener sera automatiquement supprimé après son appel.

Du coup, le bouton ne sera plus cliquable. Autant le désactiver, pour prévenir l'utilisateur avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  btn.setAttribute('disabled','disabled');

2- Sinon, si on veut qu'il puisse encore être cliquable, on peut utiliser (SANS once:true) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
btn.addEventListener('click', (event) => { 
  // ...... (action) .......
  btn.setAttribute('disabled','disabled'); // désactive
  window.setTimeout( () => { 
    btn.removeAttribute('disabled'); // active
  }, 500); // durée à adapter
});

3- Par contre, le double-clic n'est plus possible !

4- Je suis tombé sur autre discussion , qui proposait une solution avec event.detail :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
"use strict";
document.querySelector('#btn').addEventListener('click', (event) => { 
  if (event.detail === 1 ) // 1 click
  {
    console.log('simple click ! '+event.detail);
  } else if( event.detail === 2)  // 2 click
  {
    console.log('double click ! '+event.detail);
  }
});

On peut donc différencier le simple clic du double-clic.

MAIS,... même quand on fait un double-clic (= 2 clic très rapides) :

• le simple clic est activé au 1er clic
• et le double_clic au 2ème....

5- [EDIT] Peut-être une solution :

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
"use strict";
var nbr_clk = 0;
document.querySelector('#btn').addEventListener('click', (event) => { 
  nbr_clk++;
  window.setTimeout( () => { 
    if (nbr_clk === 1 ) // 1 click
    {
      console.log('simple click ! '+nbr_clk);
    } else if( nbr_clk === 2)  // 2 click
    {
      console.log('double click ! '+nbr_clk);
    }
    nbr_clk = 0;
  }, 500); // durée pour définir le double-clic (à adapter)
});

Là, on sépare bien simple et double clic.
L'inconvénient est de devoir utiliser :

• un compteur externe (btn_clk)
• une temporisation "bidon" (quelle durée pour définir le double-clic ?)

[NoSmoking]

Bonjour,
jouer avec les délais entre deux appuis, ou plus, consécutifs est délicat compte-tenu des délais de prise en compte qui sont différents suivant les navigateurs, voire les supports : PC, tablette, mobile, et ce d'autant que ces délais sont paramétrables par l'utilisateur.

La solution du « flag » est une solution « couramment utilisée », enfin si le besoin s'en fait vraiment sentir, si l'on ne veut pas de réentrance dans une fonction.

Sachant qu'en JavaScript tout est objet, les fonctions également, on peut passer par l'ajout d'une propriété propre à la fonction sans passer par une variable globale.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function maFonction() {
  if (!maFonction.enCours) {
    maFonction.enCours = true;
    console.log("Fonction in progress !");
    // simulation retour function
    setTimeout(() => {
      console.log("Out fonction");
      maFonction.enCours = false;
    }, 10000)
  }
  else {
    console.log("Exit fonction directement !")
  }
}

Il suffit de penser à remettre le « flag » à false en sortie ou en retour de fonction asynchrone.

[Couin]

Coucou

Merci pour vos réponses.

Pour Doksuri, j'ai fais un test, ça élimine bien le deux fois simple click quand on fait un double click mais lorsque l'on double click, ça lance ce qu'on veut exécuter en simple click et ensuite ce qu'on veut exécuter en double clic.

Je pense qu'en JQuery (once), pour faire référence à la première réponse de SpaceFrog, ça fera pareil.

La solution 5 de jreaux62 fait la même chose qu'un code que j'avais trouvé mais qui laisse du délai pour exécuter ce qui doit être lancé en simple click (le temps que le script regarde si il y a un deuxième click dans la foulée pour faire un double click).

Pour la solution de NoSmoking, si on considère que "Function in progress" est ce qui doit être exécuté par simple clic, et "Exit fonction directement !" ce qui doit être exécuté par un double clic, je me retrouve dans le même cas qu'avec la solution de Doksuri.

Je pense que je ne vais pas trop avoir le choix et passer par le délai de détection du deuxième clic d'un double clic.

A moins d'une solution miracle

[NoSmoking]

Je me perds dans ce que tu essaies de faire, ce que tu nous dis

J'utilise un événement "onclick" qui déclenche une fonction.

Un malencontreux double-clic déclenche 2 fois la fonction.

Pour la solution de NoSmoking, si on considère que "Function in progress" est ce qui doit être exécuté par simple clic, et "Exit fonction directement !" ce qui doit être exécuté par un double clic, je me retrouve dans le même cas qu'avec la solution de Doksuri.

...j'en conclu que tu mets/veux un événement click ET dblclick sur le même élément !!!!!

Pour rappel:

• un simple click déclenche :
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  type        détail
  ------------------
  mousedown     1
  mouseup       1
  click         1

• un double click déclenche :
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
  type        détail
  ------------------
  mousedown     1
  mouseup       1
  click         1
  mousedown     2
  mouseup       2
  click         2
  dblclick      2

[Couin]

...j'en conclu que tu mets/veux un événement click ET dblclick sur le même élément !!!!!

Ui, d'où ma précision en fin de post initial

Sachant que je ne souhaite pas désactiver la possibilité de double clic (car sur une autre page, j'utilise onclick pour une fonction et ondblclick pour une autre fonction)

En effet, si c'était pour tout, juste désactiver le deuxième clic du double clic (accidentel) et sans avoir avoir besoin de double , la tempo de désactivation fait le job.
Et pour le cas où il a besoin de click (fonction 1) et double click (fonction 2) , je mettrais la tempo qui regarde si y a un deuxieme clic rapidement après le premier.

[SpaceFrog]

Glané ailleurs sur le net;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 
element.onclick = event => {
   if (event.detail === 1) {
     // ici le code du simple click
   } else if (event.detail === 2) {
     // ici le code du double click
   }
};

Je n'ai pas testé mais je pense que cela vaut a peine d'y jeter un oeil ...

[Couin]

J'étais tombé sur ce code sur stack. Et d'ailleurs ca avait fait comme il est répondu par Fabien Snauwaert, à savoir que le double clic déclenchera quand même la fonction déclenchée par le simple. .
D'ailleurs il avait fait un fiddle un peu équivalent https://jsfiddle.net/tsyrak/0y8uqemc/4/

[jreaux62]

Glané ailleurs sur le net...

C'est le code 4- que j'ai proposé - et testé - dans mon précédent message.
Comme l'a montré NoSmoking, le click se déclenche aussi sur un double-clic.

Du coup, à part avec un setTimeout (voir ma proposition -5), je ne vois pas quoi faire d'autre.

[SpaceFrog]

de la même source
https://stackoverflow.com/questions/...click-not-both

le timeout sur le simple click...

[NoSmoking]

Et pour le cas où il a besoin de click (fonction 1) et double click (fonction 2) ,

je persiste à dire que cela est mauvaise pratique qui plus est pas intuitive du tout.


Néanmoins cela est effectivement faisable en « retardant » la fonction sur le simple clic et en la « killant » pour prendre en compte le double clic.

La structure de fonctionnement serait, par exemple, dans ce cas la suivante :

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
const elem = document.querySelector("button");
function fctSimpleClic() {
  console.log("Function on simple click.");
}
function fctDoubleClic() {
  console.log("Function on double click");
}
elem.addEventListener("click", (e) => {
  const el = e.target;
  // on supprime car sur un dblclick on repasse par là
  clearTimeout(el.innerTimer);
  // on retarde l'appel à la fonction
  el.innerTimer = setTimeout(fctSimpleClic, 500);
});
elem.addEventListener("dblclick", (e) => {
  const el = e.target;
  // on supprime l'éventuel en cours
  clearTimeout(el.innerTimer);
  // exécute la fonction
  fctDoubleClic();
});

Important : ne pas omettre le clearTimeout lors d'un simple clic car, comme déjà précisé, il y en à deux avant le double.

[Couin]

je persiste à dire que cela est mauvaise pratique qui plus est pas intuitive du tout.

Pour le cas où j'utilise les deux évents pour le même objet, le coté intuitif importe peu, dans le sens où le visiteur lambda n'a pas utilité à aller là où le double clic mène. Le double clic est juste réservé pour quelques personnes (ce qui évite de rajouter un bouton ou autre, inutile pour le visiteur).

[NoSmoking]

...dans le sens où le visiteur lambda n'a pas utilité à aller là où le double clic mène.

mais qui peux « double cliquer » par inadvertance ou par « Parkinson attitude » par exemple.

Le double clic est juste réservé pour quelques personnes (ce qui évite de rajouter un bouton ou autre, inutile pour le visiteur).

dans ce cas autant le gérer correctement côté serveur !


Après c'est vous qui voyez, comme ils disent

[Couin]

mais qui peux « double cliquer » par inadvertance

J'en ai vu beaucoup, des gens qui double-cliquent au lieu de cliquer, sur internet. Souvent des personnes, on dira, qui ont du mal avec les ordinateurs.

mais qui peux « dans ce cas autant le gérer correctement côté serveur !

Bah je vois pas trop comment puisque simple clic ramène en page d'accueil, double clic ouvre une nouvelle fenêtre.

[ProgElecT]

Salut

Vue que la discussion n'est pas marquée comme , j'avais çà dans mes archives (détection avec utilisation de setTimeout )

Code html :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="fr"> <!-- DblOuSimplClick.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Simple clique ou double</title>
	</head>
	<body>
    <h3 id="Demo">cliquez ou double-cliquez ici</h3>
    <p id="rep" style="color:blue;"></p>
   </body>
 
		<script>
      let OldEven = "";
      let xt;
      document.getElementById("Demo").addEventListener("mousedown",mousedown);
      document.getElementById("Demo").addEventListener("mouseup",mouseeup);
      document.getElementById("Demo").addEventListener("click",simpleclique);
      document.getElementById("Demo").addEventListener("dblclick",doubleeclique);
 
      function mousedown() { 
         //console.log("mouse down");
      }
      function mouseeup() {
         //console.log("mouse up");
      }
      function simpleclique() { 
         xt = setTimeout(Analyse, 500);
     }
      function doubleeclique() {
         OldEven="DC";
      }
        
       function Analyse() {
          clearTimeout(xt);
          //console.clear()
          let reponse = document.getElementById("rep");
          reponse.textContent = ""; 
          if (reponse.style.color=="blue"){
            reponse.style.color="black";
          }else{
            reponse.style.color="blue";
          }
          if (OldEven==="DC"){
            //console.log("double click");
            reponse.textContent = "double click";
          }else{
            //console.log("simple click");
            reponse.textContent = "simple click";
          }
         OldEven="";
       }
                </script>
</html>