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

Question

您如何检测到用户在使用 JavaScript 的网页上向某个方向滑动手指？

我想知道是否有一种解决方案适用于 iPhone 和 Android 手机上的网站。

原文由 827 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简单的香草 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;
 };

在安卓中测试。

原文由 givanse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

水平滑动的简单香草 JS 示例：

 let touchstartX = 0
let touchendX = 0

function checkDirection() {
  if (touchendX < touchstartX) alert('swiped left!')
  if (touchendX > touchstartX) alert('swiped right!')
}

document.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX
})

document.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX
  checkDirection()
})

您可以对垂直滑动使用完全相同的逻辑。

原文由 Damjan Pavlica 发布，翻译遵循 CC BY-SA 4.0 许可协议