¿Cómo detectar una presión de contacto largo con javascript para Android y iPhone?

El problema con el uso de Touch End para detectar el toque largo es que no funcionará si desea que el evento se dispare después de un cierto período de tiempo. Es mejor utilizar un temporizador en el inicio de toque y borrar el temporizador de evento en el extremo de toque. Se puede utilizar el siguiente patrón:

 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 }; 

Aquí mismo: http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/

Utilice touchstart y touchend para detectar el tacto largo dado un tiempo

Aquí está una versión extendida de la respuesta de Josué, ya que su código funciona bien hasta que el usuario no realiza el multitouch (puede tocar la pantalla con dos dedos y la función se disparará dos veces, 4 dedos – 4 veces). Después de algunos escenarios de prueba adicionales incluso activó la posibilidad de tocar con mucha frecuencia y recibir la ejecución de la función después de cada toque.

Añadí la variable llamada 'lockTimer' que debería bloquear cualquier touchstarts adicional antes de que el usuario dispare '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> 

Para desarrolladores de plataformas cruzadas:

Mouseup / down parecía funcionar bien en Android – pero no todos los dispositivos es decir (samsung tab4). No funciona en absoluto en iOS .

Más investigación su parece que esto se debe al elemento que tiene la selección y la ampliación nativa interupts el oyente.

Este detector de eventos permite que se abra una imagen en miniatura en un modal bootstrap, si el usuario tiene la imagen durante 500 ms.

Utiliza una clase de imagen sensible que muestra una versión más grande de la imagen. Este pedazo de código ha sido probado completamente en (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) }); 

Podemos calcular la diferencia de tiempo cuando el toque se inicia y cuando el toque final. Si la diferencia de tiempo calculada excede la duración del tacto entonces usamos un nombre de función 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); 

La "presión de tacto largo" se llama "prensa" y está implementado en Hammer.js http://hammerjs.github.io/ Pruebe sus demostraciones.

Lo he hecho de esta manera en mi aplicación de Android:

1. Oyentes de eventos registrados:

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

2. Funciones añadidas:

    var timer; function onTouchStart(e) { touchStartTimeStamp = e.timeStamp; } function onTouchEnd(e) { touchEndTimeStamp = e.timeStamp; console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds } 

3. Marcó la diferencia de tiempo y hizo mis cosas

Espero que esto sea de ayuda.

Evento de toque largo que funciona en todos los navegadores

 (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); 

Vincular evento longclick con intervalo de tiempo

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

Debajo del fuego de la función en el golpecito largo en el dispositivo de tacto

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

Lo he intentado, es difícil de hacer. Todavía no he estado dispuesto a adoptar un marco móvil grande para mis aplicaciones, pero si estás bien con él, Sencha Touch se supone que es compatible con este y otros eventos táctiles en dispositivos webkit.

En mis pruebas con touchstart no puedo evitar que el navegador móvil muestre un diálogo en lugar de activar mi evento.