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.