Implementing Finger Swipe Detection with JavaScript on Mobile Devices

Fundamentals of Mobile Touch Events

In mobile device browsers, JavaScript detects user finger operations through touch event APIs. These events include touchstart, touchmove, touchend, and touchcancel. Among them, the touchstart event triggers when a finger touches the screen, touchmove continuously triggers during finger movement, and touchend triggers when the finger leaves the screen.

Each touch event object contains a touches property, which is a TouchList object containing all currently active touch points. For single-finger swipe detection, we primarily focus on the position information of the first touch point (index 0).

Core Algorithm for Swipe Detection

The core of swipe detection lies in comparing coordinate differences between touch start and touch move (or end). Here are the key steps to implement this functionality:

First, we need to define variables in the global scope to store initial touch positions:

var xDown = null;
var yDown = null;

Then, add touch event listeners to the document:

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

In the handleTouchStart function, we record the initial touch position:

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

The getTouches function here is used to accommodate different event object structures:

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

Direction Judgment Logic

In the handleTouchMove function, we calculate coordinate differences and determine the swipe direction:

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)) {
        if (xDiff > 0) {
            /* Right swipe detection */
        } else {
            /* Left swipe detection */
        }
    } else {
        if (yDiff > 0) {
            /* Down swipe detection */
        } else {
            /* Up swipe detection */
        }
    }

    xDown = null;
    yDown = null;
}

This algorithm first compares the absolute values of horizontal and vertical movement distances to determine the primary movement direction. Then, it judges the specific direction based on the sign of the coordinate differences.

Cross-Platform Compatibility Considerations

To ensure the code works properly on both iPhone and Android devices, the following points need attention:

The structure of event objects may vary by browser. Some libraries (like jQuery) might wrap native events in the originalEvent property, so our getTouches function needs to handle this situation.

Differences in coordinate systems also need consideration. clientX and clientY provide coordinates relative to the viewport, which is appropriate in most cases. However, in certain special scenarios, pageX/pageY or screenX/screenY might be needed.

Performance Optimization Recommendations

In practical applications, the performance of swipe detection is crucial. Here are some optimization suggestions:

Avoid performing complex calculations or DOM operations in the touchmove event, as this may affect scrolling smoothness.

Consider using debouncing or throttling techniques to limit the execution frequency of event handling functions.

Reset state variables promptly after swipe detection is complete to avoid memory leaks and incorrect state judgments.

Practical Application Scenarios

The game development scenario mentioned in the reference article demonstrates the practical application value of swipe detection. In rhythm games, real-time detection of player swipe operations can be used to control character movement, switch menu options, or perform special actions.

This technology is equally applicable to scenarios requiring gesture interactions, such as image viewers, map applications, and e-book readers. Accurate swipe detection can significantly enhance the user experience of mobile web pages.