"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo detectar los movimientos de los dedos del usuario con JavaScript en iPhone y Android?

¿Cómo detectar los movimientos de los dedos del usuario con JavaScript en iPhone y Android?

Publicado el 2024-11-15
Navegar:117

How to Detect User Finger Swipes with JavaScript on iPhone and Android?

Cómo detectar deslizamientos con los dedos en JavaScript en iPhone y Android

Al desarrollar aplicaciones web optimizadas para dispositivos móviles, detectar gestos del usuario, como deslizar los dedos es crucial para crear interfaces intuitivas y responsivas. Esta guía proporciona una solución integral que le permite detectar deslizamientos de dedos en dispositivos iPhone y Android usando JavaScript.

Para detectar deslizamientos de dedos, aprovechamos los detectores de eventos táctiles en JavaScript. Aquí hay un fragmento de código de muestra para comenzar:

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches || evt.originalEvent.touches;
}

function handleTouchStart(evt) {
  const firstTouch = getTouches(evt)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
    if (xDiff > 0) {
      /* right swipe */
    } else {
      /* left swipe */
    }
  } else {
    if (yDiff > 0) {
      /* down swipe */
    } else {
      /* up swipe */
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
}

Este fragmento de código escucha los eventos 'touchstart' y 'touchmove', capturando la posición táctil inicial, así como la posición actualizada durante el movimiento. Al comparar las diferencias xey, podemos determinar la dirección del deslizamiento. Ya sea que se deslice hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo, este código proporciona una solución sólida para detectar deslizamientos con el dedo.

Este enfoque ha sido probado y verificado para que funcione de manera efectiva en dispositivos Android. Al incorporarlo a su base de código JavaScript, puede crear experiencias web orientadas a dispositivos móviles que deleiten a los usuarios con interacciones fluidas y basadas en gestos.

Declaración de liberación Este artículo se reimprime en: 1729335143 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3