¿Cómo detectar una presión táctil prolongada con javascript para Android y iPhone?

Te recomendamos que pruebes esta respuesta en un entorno controlado antes de pasarlo a producción, un saludo.

Solución:

El problema con el uso de Touch End para detectar el toque prolongado es que no funcionará si desea que el evento se active después de un cierto período de tiempo. Es mejor usar un temporizador al inicio táctil y borrar el temporizador de eventos al final del 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í hay una versión extendida de la respuesta de Joshua, ya que su código funciona bien hasta que el usuario no realiza un toque múltiple (puede tocar la pantalla con dos dedos y la función se activará 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.

Agregué una variable llamada ‘lockTimer’ que debería bloquear cualquier inicio táctil adicional antes de que el usuario active el ‘touchend’.

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

function touchstart(e) 
    e.preventDefault();
    if (!timer) 
        timer = setTimeout(onlongtouch, touchduration);
    


function touchend() 
    //stops short touches from firing the event
    if (timer) 
        clearTimeout(timer);
        timer = null;
    


onlongtouch = function()  
    timer = null;
    document.getElementById('ping').innerText+='pingn'; 
;

document.addEventListener("DOMContentLoaded", function(event)  
    window.addEventListener("touchstart", touchstart, false);
    window.addEventListener("touchend", touchend, false);
);

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. comprobé la diferencia horaria e hice mis cosas

Espero que esto sea de ayuda.

Eres capaz de añadir valor a nuestro contenido aportando tu veteranía en las aclaraciones.

---

---

Utiliza Nuestro Buscador