web-dev-qa-db-fra.com

Comment détecter une longue pression tactile avec javascript pour Android et iphone?

Comment détecter une longue pression tactile avec javascript pour Android et iphone? Javascript natif ou jquery ...

Je veux quelque chose qui ressemble à:

<input type='button' onLongTouch='myFunc();' />
javascriptiphoneandroidhtml5mobile-website
32
Christophe Debove

Le problème avec l'utilisation de Touch End pour détecter la touche longue est que cela ne fonctionnera pas si vous voulez que l'événement se déclenche après une certaine période de temps. Il est préférable d'utiliser une minuterie au démarrage tactile et d'effacer la minuterie d'événement à la fin tactile. Le modèle suivant peut être utilisé:

var onlongtouch; 
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something

touchstart() {
    timer = setTimeout(onlongtouch, touchduration); 
}

touchend() {

    //stops short touches from firing the event
    if (timer)
        clearTimeout(timer); // clearTimeout, not cleartimeout..
}

onlongtouch = function() { //do something };
47
Joshua

Voici une version étendue de la réponse de Joshua, car son code fonctionne bien jusqu'à ce que l'utilisateur n'effectue pas de multitouch (vous pouvez appuyer sur l'écran avec deux doigts et la fonction sera déclenchée deux fois, 4 doigts - 4 fois). Après quelques scénarios de test supplémentaires, j'ai même déclenché la possibilité de toucher très fréquemment et de recevoir la fonction s'exécutant après chaque tap.

J'ai ajouté une variable nommée 'lockTimer' qui devrait verrouiller tout contact tactile supplémentaire avant le déclenchement de l'utilisateur 'touchend'.

var onlongtouch; 
var timer, lockTimer;
var touchduration = 800; //length of time we want the user to touch before we do something

function touchstart(e) {
        e.preventDefault();
        if(lockTimer){
                return;
        }
    timer = setTimeout(onlongtouch, touchduration); 
        lockTimer = true;
}

function touchend() {
    //stops short touches from firing the event
    if (timer){
        clearTimeout(timer); // clearTimeout, not cleartimeout..
                lockTimer = false;
        }
}

onlongtouch = function() { 
        document.getElementById('ping').innerText+='ping\n'; 
};

document.addEventListener("DOMContentLoaded", function(event) { 
  window.addEventListener("touchstart", touchstart, false);
  window.addEventListener("touchend", touchend, false);
});
<div id="ping"></div>
7
SLoN1ck

Je l'ai fait de cette façon dans mon Android:

  1. auditeurs d'événements enregistrés:

    var touchStartTimeStamp = 0;
var touchEndTimeStamp   = 0;

window.addEventListener('touchstart', onTouchStart,false);
window.addEventListener('touchend', onTouchEnd,false);

  2. fonctions ajoutées:

    var timer;
function onTouchStart(e) {
    touchStartTimeStamp = e.timeStamp;
}

function onTouchEnd(e) {
    touchEndTimeStamp = e.timeStamp;

    console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
}

  3. vérifié le décalage horaire et fait mes affaires

J'espère que cela vous aidera.

2
Strabek

Nous pouvons calculer la différence de temps au début et à la fin du toucher. Si la différence de temps calculée dépasse la durée de contact, nous utilisons un nom de fonction taphold.

var touchduration = 300; 
var timerInterval;

function timer(interval) {

    interval--;

    if (interval >= 0) {
        timerInterval = setTimeout(function() {
                            timer(interval);
                        });
    } else {
        taphold();
    }

}

function touchstart() {
    timer(touchduration);
}

function touchend() {
    clearTimeout(timerInterval);
}

function taphold(){
    alert("taphold");
}


document.getElementById("xyz").addEventListener('touchstart',touchstart);
document.getElementById("xyz").addEventListener('touchend',touchend);
1
pradeep

Pour les développeurs multiplateformes:

Mouseup/down semble fonctionner correctement sur Android - mais pas sur tous les appareils (samsung tab4). Ne fonctionnait pas du tout sur iOS.

Des recherches plus approfondies semblent indiquer que cela est dû à la sélection de l'élément et au grossissement natif qui interrompt l'auditeur.

Cet écouteur d'événements permet d'ouvrir une image miniature dans un modal bootstrap, si l'utilisateur détient l'image pendant 500 ms.

Il utilise une classe d'image réactive montrant donc une version plus grande de l'image. Ce morceau de code a été entièrement testé sur (iPad/Tab4/TabA/Galaxy4):

var pressTimer;  
$(".thumbnail").on('touchend', function (e) {
   clearTimeout(pressTimer);
}).on('touchstart', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find('img').attr('src');
   var title = target.find('.myCaption:visible').first().text();
   $('#dds-modal-title').text(title);
   $('#dds-modal-img').attr('src', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $('#dds-modal').modal('show');
   }, 500)
});
1
tyler_mitchell

Ici: http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-Android/

Utilisez touchstart et touchend pour détecter un contact long avec un certain temps

1
Pwnna