javascript Clic court et clic long en JavaScript

[LaPomme]

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

function initElement() {
  var p = document.getElementById("bouton");
  p.onclick = showAlert;
};

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

Merci pour votre aide,
A+

 

[Ziggy]

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

Element : évènement mousedown - Référence Web API | MDN

L'évènement mousedown est déclenché à partir d'un Element lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

developer.mozilla.org

Element : évènement mouseup - Référence Web API | MDN

L'évènement mouseup est déclenché à partir d'un Element lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.

developer.mozilla.org

 

[Sam_du_13]

Chelou le Date.now()

La méthode Date.now() renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.

Donc LaPomme fait bien ton calcul !!

 

[Jack]

Quelle fonction veux tu attribuer au clic court et quelle fonction pour le clic long ?
Ce sont des fonctions ou bien des actions simples ? affichage d'un message ? clic sur un lien différent ? etc...

 

[Ziggy]

Tu peux essayer ce code

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.

 

[Wazz9]

Je veux bien que tu m'expliques ce bout de code : if (d.getTime() - timestamp >= 1500)

 

[LaPomme]

Salut, merci Ziggy pour le code mais j'avoue que je suis un peu perdu pour l'intégrer à mon bouton

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

Tu peux essayer ce code

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 ?

 

[L'occitan]

Comment je dois procéder pour le relier au code Javascript que tu propose ?

Il faut attribuer un id à ton bouton, par exemple btn-clic donc

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

Et ensuite rajouter une variable au code JS qui rappelle l'id.

var element = document.querySelector('#btn-clic');

 

[Ziggy]

LaPomme

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

 

[CandyShop]

if (diff >= 1500)
ça fait pas un peu long 1 seconde et demi pour le clic long ?

 

[LaPomme]

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]

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

 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]

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]

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

object.onmouseover = function() {
    // ton code
};

et le classique onclick

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]

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__]

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]

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]

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]

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 !