web-dev-qa-db-fra.com

jQuery sur l'événement 'double clic' (dblclick for mobile)

J'ai la fonction de gestion des événements jquery suivante:

$('.target').on('dblclick', function() {
    //respond to double click event
});

Mon problème est que ce gestionnaire d'événements ne fonctionne pas sur les appareils tactiles (iPhone, iPad, etc.). Quelqu'un peut-il recommander une alternative fiable à dblclick qui fonctionne sur les appareils tactiles tout en permettant une utilisation confortable en double-clic sur des appareils de taille normale?

javascriptjquerytouch
18
JRulle

J'ai fini par créer une fonction personnalisée de double-clic qui fonctionnera à la fois sur le mobile et sur le bureau:

var touchtime = 0;
$(".target").on("click", function() {
    if (touchtime == 0) {
        // set first click
        touchtime = new Date().getTime();
    } else {
        // compare first click to this click and see if they occurred within double click threshold
        if (((new Date().getTime()) - touchtime) < 800) {
            // double click occurred
            alert("double clicked");
            touchtime = 0;
        } else {
            // not a double click so set as a new first click
            touchtime = new Date().getTime();
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="target">Double click me</div>

Alternativement, voici le JSfiddle Demo .

15
JRulle

Vous pouvez lier plusieurs écouteurs d'événement sur l'élément et utiliser l'événement tap de jQuery pour les périphériques tactiles.

$( ".target" ).on({
  dbclick: function() {
    //do stuff
  }, touch: function() {
    //do the same stuff
  }
});
3
Aweary

Ajoutez ceci à votre index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  

J'ai trouvé que la fonction de zoom mobile pouvait dérégler le dblclick de JQuery. Fondamentalement, il est dit que votre fenêtre d'affichage ne changera pas efficacement si vous désactivez le zoom. Cela fonctionne pour moi sur mon Nexus 5 sous Chrome. 

2
Thomas Valadez

La réponse marquée de @JRulle semble ne fonctionner que pour un seul objet. Si vous avez plusieurs instances avec la même classe, elles seront considérées comme un seul objet Voir l'exemple
Fiddle exemple

Ma solution semble fonctionner dans des cas comme celui-là

var touchtime = 0;
$('.target').on('click', function() {
  if (touchtime == 0) {
    touchtime = new Date().getTime();
  } else {
    if (((new Date().getTime()) - touchtime) < 800) {
      alert("double clicked");
      touchtime = 0;
    } else {
      touchtime = 0;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="target">click me!</p>
<p class="target">then click me!</p>

<a href="#">click link</a>

1
B.F.playz

J'ai une amélioration au code ci-dessus, qui n'a pas détecté un double clic après un simple clic:

var touchtime = 0;
$(".target").on("click", function() {
  if (((new Date().getTime()) - touchtime) < 500) {
    alert("double clicked");
  }
  touchtime = new Date().getTime();
});

Ce code détecte tous les doubleclicks. J'ai également réduit le temps de contact à 500 ms (temps de double clic standard).

0
webslash

Merci pour la solution - la seule chose que j'ai faite a été d'ajouter un délai d'attente pour pouvoir les traiter comme des événements séparés.

var touchtime = 0;
var delay = 800;
var action = null;
$(".target").on("click", function() {
  /*Double Click */
  if((new Date().getTime() - touchtime) < delay){
     clearTimeout(action)
     alert('dbl');
     touchtime=0;
  }
  /* Single Click */
  else{
     touchtime = new Date().getTime();
     action = setTimeout(function(){
        alert('single');
     },delay);
  }
}));

Bien que je ne l’aie pas testé, il pourrait également être intéressant d’ajouter ce qui suit à une section d’en-tête de tout code HTML <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> selon: To "user-scalable = no" ou non "user-scalable = no"

0
Elliott