javascript Clic court et clic long en JavaScript

LaPomme

Membre
Hello la mifa !

La petite question du week-end : Comment attribuer une fonction différente lors d'un clic court ou un clic long sur un élément HTML ?
Je suis parti sur le bout de code suivant avec un onclick mais je ne parviens pas à mes fins parce que setTimeout() permet de décaler l'action dans le temps après le clic donc pas vraiment ce que je cherche à faire.

Donc voici le code
JavaScript
function initElement() {
  var p = document.getElementById("bouton");
  p.onclick = showAlert;
};

function showAlert() {
  alert("mon message");
}

Merci pour votre aide,
A+ 🍎
 
Solution
LaPomme
HTML
<button type="button" id="btn-clic">Voir plus...</button>

<script>
var timestamp = null  
var element = document.querySelector('#btn-clic');
element.onmousedown = function() {
    var d = new Date();
    timestamp = d.getTime();
}
 
element.onmouseup = function() {
    var d = new Date();
    var diff = parseFloat(d.getTime()) - parseFloat(timestamp );
    if (diff >= 1500) {
          /* code pour un clic long */
      }
    else {
          /* code pour un clic court */
      }
  }
</script>

Try this ! ;)

Ziggy

Membre
setTimeout() peut te servir dans ce cas (avec Date.now() par exemple) mais il faut que tu oublies le onclick et que tu regardes plutôt vers des éléments comme : mousedown et mouseup
 

Ziggy

Membre
Tu peux essayer ce code
JavaScript
var timestamp = null
 
element.onmousedown = function() {
    d = new Date()
    timestamp = d.getTime()
}
 
element.onmouseup = function() {
    d = new Date()
    if (d.getTime() - timestamp >= 1500) {
        // ton code pour un clic long
    }
    else {
        // ton code pour un clic court
    }
}

On définit un temps t à 0 avec d = new Date() puis un on définit une variable timestamp qui est égale à d.
Si d - timestamp <= 1, 5s alors clic court sinon clic long.
 

LaPomme

Membre
Salut, merci Ziggy pour le code mais j'avoue que je suis un peu perdu pour l'intégrer à mon bouton
HTML
<bouton type="button">Voir plus...</button>
Comment je dois procéder pour le relier au code Javascript que tu propose ?

Le clic court je veux lui attribuer un lien, le clic long un autre lien, des balises <a href="#" /> toutes simple.
 

Cascadeur

Membre
Tu peux essayer ce code
JavaScript
var timestamp = null

element.onmousedown = function() {
    d = new Date()
    timestamp = d.getTime()
}

element.onmouseup = function() {
    d = new Date()
    if (d.getTime() - timestamp >= 1500) {
        // ton code pour un clic long
    }
    else {
        // ton code pour un clic court
    }
}

On définit un temps t à 0 avec d = new Date() puis un on définit une variable timestamp qui est égale à d.
Si d - timestamp <= 1, 5s alors clic court sinon clic long.
Il y a 2 fonctions dans ton code, je rejoins LaPomme avec sa question comment l'intégrer à HTML ?
 

Ziggy

Membre
LaPomme
HTML
<button type="button" id="btn-clic">Voir plus...</button>

<script>
var timestamp = null  
var element = document.querySelector('#btn-clic');
element.onmousedown = function() {
    var d = new Date();
    timestamp = d.getTime();
}
 
element.onmouseup = function() {
    var d = new Date();
    var diff = parseFloat(d.getTime()) - parseFloat(timestamp );
    if (diff >= 1500) {
          /* code pour un clic long */
      }
    else {
          /* code pour un clic court */
      }
  }
</script>

Try this ! ;)
 

LaPomme

Membre
Super Ziggy ! Merci pour le code, effectivement j'ai baissé le délai à 1000ms et c'est plus réactif et fluide comme ça.
Je me posais une autre question à propos des clics en JS.

Est-ce qu'il existe quelque chose pour configurer le clic droit et éventuellement le clic du milieu ?
 

mikadox

Membre
Il y a du code JS pour ceci mais je pense qu'il est un peu compliqué d'attribuer une fonction au clic droit de la souris car il y a déjà des fonctions de base :
retour / actualiser / copier / coller etc... Pour le clic du milieu c'est peut-être plus simple.

En tout cas voici le code de base
JavaScript
 function rightclick() {
    var rightclick;
    var e = window.event;
    if (e.which) rightclick = (e.which == 3); // e.which == 3 c'est le clic droit
    else if (e.button) rightclick = (e.button == 2); // e.which == 2 c'est le clic milieu
    alert(rightclick);
}

A coder selon les besoins... je n'ai jamais essayé ce type de code.
 

Jack

Membre
Salut LaPomme, je te déconseille de bricoler avec le clic droit de la souris, il y a déjà assez d'éléments dans le menu contextuel d'une part et puis c'est un peu intrusif comme fonctionnalité (à l'image de la discussion sur le plein écran automatique JAVASCRIPT - Forcer le plein écran du navigateur sur un site ).
Le clic du milieu pourquoi pas mais garde à l'esprit que sur les smartphones, tablettes, PC portable avec utilisation d'un pad il sera difficile voir impossible d'accéder à ce clic. Attribuer 2 fonctions différentes au clic gauche devrait te suffire, en tout cas tu devrais t'en contenter.
 

Hamza

Membre
Super Ziggy ! Merci pour le code, effectivement j'ai baissé le délai à 1000ms et c'est plus réactif et fluide comme ça.
Hello !

Sinon il y avait la possibilité d'utiliser l'élément onmouseover en JS
JavaScript
object.onmouseover = function() {
    // ton code
};
et le classique onclick
JavaScript
object.onclick = function() {
    // ton code
};
Avec ces deux éléments tu avais 2 fonctions pour 2 événements différents sur ton bouton, un au passage de la souris et un autre au clic.
 

Anthony

Membre
Sinon il y avait la possibilité d'utiliser l'élément onmouseover en JS
C'est une idée mais attention à la fonction associée, si ça déclenche un téléchargement, un changement de page un simple over avec la souris et ça lance la fonction. On pourrait donc déclencher l'action sans le vouloir en se baladant sur la page avec le pointeur de la souris.

Du coup là ce serait intéressant d'utiliser setTimeout() comme l'a tenté LaPomme dans son premier code.
 

Rockets__

Membre
Sinon il y avait la possibilité d'utiliser l'élément onmouseover en JS
Oui et ça a l'avantage de ne pas toucher au clic gauche de la souris.
Avec un setTimeout() c'est parfait.

Je pense que c'est la meilleure approche pour gérer deux actions différentes sur un lien/bouton. Le double-clic ça doit se faire aussi mais bon pourquoi faire compliqué quand on peut faire simple et efficace ?
 

LaPomme

Membre
Hello à tous,

C'est vrai que je n'avais pas pensé à un événement déclenché au passage de la souris, ça simplifierait le code du coup.
Mais il y aurait un problème :
  • pour éviter le déclenchement malencontreux, jack recommande le délai sur le pointeur, disons 1 seconde.
  • mais l'utilisateur qui pointe sa souris sur le bouton risque de cliquer dessus avant que la seconde soit passée
  • si bien qu'il ne verra jamais l'événement déclenchée s'il était resté plus longtemps sur le bouton sans rien faire.
Donc je ne sais pas trop....
 

Nicolas

Membre
D'un autre côté, la méthode du clic court et clic long c'est le même problème...
L'utilisateur qui vient cliquer sur le bouton a peu de chance de rester "cliqué" plus d'une seconde pour déclencher l'action du clic long, à moins de le prévenir. Mais si tu dois mettre un encart pour expliquer comment fonctionne le bouton autant mettre un deuxième bouton ou faire une liste de choix déroulante.

Non ?
 

LaPomme

Membre
Hmmm...

C'est vrai je n'y avais pas pensé...
Mais ce n'est pas vraiment un problème, il y a déjà un texte explicatif au dessus de ce bouton de téléchargement, je vais rajouter le mode de fonctionnement.
clic court = fichier brut, clic long fichier compressé.

no problemo !
 

Ces discussions pourraient vous intéresser...

Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
Bonjour à toutes et à tous, Dans la lignée des exercices PHP X, je vous propose aujourd'hui un exercice JavaScript ! Il est très simple et ne nécessite qu'une seule fonction. C'est une ligne de code que l'on doit trouver, elle doit être capable de fusionner 2 tableaux. Voici des...
Haut