Ne pas prendre un double-clic pour 2 clics ?

Version imprimable

25/10/2021, 05h06
Couin

Ne pas prendre un double-clic pour 2 clics ?

Coucoutte :D

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
25/10/2021, 08h34
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

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

Code:

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:

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

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 } });

25/10/2021, 09h24
SpaceFrog

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

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

1- once:true : selon la doc :

Citation:

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:

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

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

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:

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

:calim2:

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

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 ?)

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:

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.

26/10/2021, 00h55
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 :D
26/10/2021, 10h54
NoSmoking
Je me perds dans ce que tu essaies de faire, ce que tu nous dis

Citation:

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

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

Citation:

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:
  
  1 2 3 4 5 type détail ------------------ mousedown 1 mouseup 1 click 1
- un double click déclenche :
  Code:
  
  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
26/10/2021, 14h06
Couin

Citation:

Envoyé par NoSmoking

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

Citation:

Envoyé par Couin

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.

Glané ailleurs sur le net;

Code:

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

26/10/2021, 15h08
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/
26/10/2021, 16h11
jreaux62

Citation:

Envoyé par SpaceFrog

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.
26/10/2021, 16h23
SpaceFrog

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

le timeout sur le simple click...

Citation:

Envoyé par Couin

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:

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.

26/10/2021, 17h53
Couin

Citation:

Envoyé par NoSmoking

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).
:)
26/10/2021, 18h28
NoSmoking

Citation:

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

Citation:

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 ;)
26/10/2021, 20h26
Couin

Citation:

Envoyé par NoSmoking

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.

Citation:

Envoyé par NoSmoking

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.

Salut

Vue que la discussion n'est pas marquée comme https://contrib-vb.developpez.com/Pr.../ResoluNon.jpg , j'avais çà dans mes archives (détection avec utilisation de setTimeout )

Code:

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>