Comment détecter une pression longue touche avec javascript pour android et iphone?

j'ai ajouté une variable nommée 'lockTimer' qui devrait verrouiller tous les touchstarts supplémentaires avant que l'utilisateur ne déclenche "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>

Utiliser touchstart et touchend pour détecter longue touche de temps donné

nous pouvons calculer le décalage horaire quand le toucher a commencé et quand le toucher s'est terminé. Si la différence de temps calculée dépasse la durée de contact, alors 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);

Pour la croix-plate-forme aux développeurs:

Mouseup/bas semblait d'accord sur android - mais pas tous les dispositifs ie (samsung tab4). Ne fonctionne pas du tout sur iOS.

D'autres recherches il semble que cela soit dû à l'élément ayant la sélection et le grossissement natif intercale l'auditeur.

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

il utilise une classe image responsive 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)
});

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

1. events registered listeners:

   var touchStartTimeStamp = 0;
   var touchEndTimeStamp   = 0;
   
   window.addEventListener('touchstart', onTouchStart,false);
   window.addEventListener('touchend', onTouchEnd,false);
   

2. ajout de fonctions:

   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 trucs

j'espère que cela aidera.

clic Long de l'événement qui travaillent dans tous les navigateurs

(function (a) {
        function n(b) { a.each("touchstart touchmove touchend touchcancel".split(/ /), function (d, e) { b.addEventListener(e, function () { a(b).trigger(e) }, false) }); return a(b) } function j(b) { function d() { a(e).data(h, true); b.type = f; jQuery.event.handle.apply(e, o) } if (!a(this).data(g)) { var e = this, o = arguments; a(this).data(h, false).data(g, setTimeout(d, a(this).data(i) || a.longclick.duration)) } } function k() { a(this).data(g, clearTimeout(a(this).data(g)) || null) } function l(b) {
            if (a(this).data(h)) return b.stopImmediatePropagation() ||
            false
        } var p = a.fn.click; a.fn.click = function (b, d) { if (!d) return p.apply(this, arguments); return a(this).data(i, b || null).bind(f, d) }; a.fn.longclick = function () { var b = [].splice.call(arguments, 0), d = b.pop(); b = b.pop(); var e = a(this).data(i, b || null); return d ? e.click(b, d) : e.trigger(f) }; a.longclick = { duration: 500 }; a.event.special.longclick = {
            setup: function () {
                /iphone|ipad|ipod/i.test(navigator.userAgent) ? n(this).bind(q, j).bind([r, s, t].join(" "), k).bind(m, l).css({ WebkitUserSelect: "none" }) : a(this).bind(u, j).bind([v,
                w, x, y].join(" "), k).bind(m, l)
            }, teardown: function () { a(this).unbind(c) }
        }; var f = "longclick", c = "." + f, u = "mousedown" + c, m = "click" + c, v = "mousemove" + c, w = "mouseup" + c, x = "mouseout" + c, y = "contextmenu" + c, q = "touchstart" + c, r = "touchend" + c, s = "touchmove" + c, t = "touchcancel" + c, i = "duration" + c, g = "timer" + c, h = "fired" + c
    })(jQuery);

Bind longclick événement avec l'intervalle de temps

 $('element').longclick(250, longClickHandler);

ci-dessous fonction feu sur le long robinet sur l'appareil tactile

function longClickHandler() {
    alter('Long tap Fired');
}

le " long touch pressure "est appelé" press " et il est mis en œuvre dans le marteau.js http://hammerjs.github.io/ Essayez leurs démos.

j'ai essayé, c'est difficile à faire. Je n'ai pas encore été prêt à adopter un grand cadre mobile pour mes applications, mais si vous êtes D'accord avec cela, Sencha Touch est supposé supporter ceci et d'autres évènements touch sur les périphériques webkit.

dans mes tests avec touchstart, Je ne peux pas empêcher le navigateur mobile d'ouvrir une boîte de dialogue au lieu de déclencher mon événement.