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

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

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

回答:

简单的原始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 ) {

/* left swipe */

} else {

/* right swipe */

}

} else {

if ( yDiff > 0 ) {

/* up swipe */

} else {

/* down swipe */

}

}

/* reset values */

xDown = null;

yDown = null;

};

在Android上测试。

以上是 通过iPhone和Android上的JavaScript检测手指滑动 的全部内容, 来源链接: www.h5w3.com/qa/398174.html

回到顶部