Detect Finger Swipe Gestures in JavaScript

Swipe gestures are common on touch based devices such as smartphones and tablets. In this article, we will explore how to detect swipe gestures with JavaScript

To detect swipe gestures, we need to track the user's touch movements and determine if they meet certain criteria for a swipe. One way to do this is by using the touchstart, touchmove and touchend event listeners.

• touchstart: This event is fired when the user touches the screen. It can be used to track the starting position of a touch interaction.
• touchend: This event is fired when the user lifts their finger off the screen. It can be used to track the ending position of a touch interaction.
• touchmove: This event is fired when the user's finger moves on the screen. It can be used to track the movement of a touch interaction.

How To Detect Swipe Gestures With Javascript

The following code snippet allows for detecting finger swipe gestures on a specified container element. It sets up event listeners for the touchstart and touchend events and uses a swipe function to determine whether a swipe gesture occurred based on the elapsed time and distance the touch has moved.

// Get the container element by its ID
const container = document.getElementById("container");

// Add event listeners for touchstart and touchend events
container.addEventListener("touchstart", touchStart);
container.addEventListener("touchend", touchEnd);

// Declare variables to store the timestamp and initial touch coordinates
let touchStartTime, clientX, clientY;

function touchStart(e) {
  // Prevent the default behavior (e.g. scrolling) of the touch event
  e.preventDefault();

  // Record the timestamp of the touch event
  touchStartTime = Date.now();

  // Record the X and Y coordinates of the touch on the screen
  clientY = e.touches[0].clientY;
  clientX = e.touches[0].clientX;
}

function touchEnd(e) {
  // Record the timestamp of the touch end event
  const touchEndTime = Date.now();

  // Call the swipe function to check if a swipe gesture occurred
  swipe(e, touchEndTime - touchStartTime);
}

The direction of the swipe is determined by comparing the initial and final touch coordinates, and the appropriate code is executed for the detected direction. The duration and distance thresholds can be adjusted to change the sensitivity of the swipe detection.

const DURATION_THRESHOLD = 500;
const MOVE_THRESHOLD = 100;

function swipe(e, duration) {
  // Get the final X and Y coordinates of the touch
  const endClientX = e.changedTouches[0].clientX;
  const endClientY = e.changedTouches[0].clientY;

  // Check if the elapsed time between touchstart and touchend events is less than or equal to the duration threshold
  if (duration <= DURATION_THRESHOLD) {
    // Check if the touch moved at least MOVE_THRESHOLD pixels in the X or Y direction
    if (clientY - endClientY >= MOVE_THRESHOLD) {
      // Swipe up detected
      console.log("swiped up");
      // Perform any additional code for swipe up here
    } else if (endClientY - clientY >= MOVE_THRESHOLD) {
      // Swipe down detected
      console.log("swiped down");
      // Perform any additional code for swipe down here
    } else if (endClientX - clientX >= MOVE_THRESHOLD) {
      // Swipe right detected
      console.log("swiped right");
      // Perform any additional code for swipe right here
    } else if (clientX - endClientX >= MOVE_THRESHOLD) {
      // Swipe left detected
      console.log("swiped left");
      // Perform any additional code for swipe left here
    }
  }
}

Conclusion

In this article, we explored how to detect finger swipe gestures on mobile devices using the Javascript touchstart, touchmove and touchend event listeners. By monitoring the user's finger movement, you can create touch-based web applications.

Thank you for reading.