如何在 iPhone 和 Android 上的 JavaScript 中检测和确定手指滑动方向？

在 iPhone 和 Android 上用 JavaScript 检测手指滑动

在当今以移动为中心的世界中，在各种设备上提供无缝的用户体验至关重要。对可用性做出重大贡献的一方面是能够检测 Web 应用程序中的手指滑动。本文介绍了一个普通的 JS 解决方案，可以在 iPhone 和 Android 平台上解决这一挑战。

识别用户滑动

为了在 JavaScript 中检测手指滑动，我们将利用“touchstart”事件侦听器和“触摸移动”。这些监听器跟踪初始触摸点（xDown、yDown），然后监视后续触摸动作。

确定滑动方向

识别滑动方向的关键在于计算触摸点之间的差异“触摸移动”事件。通过比较 x 轴和 y 轴的差异，我们可以确定最显着的移动：

• 如果 x 轴的差异大于 y 轴的差异：发生了水平滑动.
• 否则，发生了垂直滑动。

根据这些计算，我们可以将滑动分类为：

• 水平滑动：向左或向右
• 垂直滑动：向上或向下

示例代码

以下代码片段提供了一个简单的尚未有效实现滑动检测：

<code class="js">document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}

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

此代码示例已在 Android 设备上成功测试。

浏览器兼容性

提供的解决方案与以下浏览器兼容在 iPhone 和 Android 上：

• Safari
• Chrome
• Firefox

结论

此 JavaScript 解决方案支持您可以在 iPhone 和 Android 设备上有效地检测手指滑动。它为构建更直观、用户友好的 Web 应用程序提供了坚实的基础，这些应用程序可以自然地响应触摸手势。

以上是如何在 iPhone 和 Android 上的 JavaScript 中检测和确定手指滑动方向？的详细内容。更多信息请关注PHP中文网其他相关文章！