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

小开

我之前使用的方法是，您必须检测mousedown事件，记录其x,y位置(任何相关的位置)，然后检测mouseup事件，并减去两个值。

小开

jQuery Mobile还包括滑动支持:http://api.jquerymobile.com/swipe/

例子

$("#divId").on("swipe", function(event) {
alert("It's a swipe!");
});

小开

我把TouchWipe重新打包为一个简短的jquery插件:detectSwipe

小开

最佳答案

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

Android测试。

小开

如果有人试图在Android上使用jQuery Mobile，并且有JQM滑动检测的问题

(我在Xperia Z1, Galaxy S3, Nexus 4和一些Wiko手机上也有一些)这可能很有用:

 //Fix swipe gesture on android
if(android){ //Your own device detection here
$.event.special.swipe.verticalDistanceThreshold = 500
$.event.special.swipe.horizontalDistanceThreshold = 10
}

在android上的滑动不会被检测到，除非它是一个非常长、精确和快速的滑动。

这两条线可以正常工作

小开

一些mod的顶部回答(不能评论…)来处理短滑动

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].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 )>150){ //to deal with to short swipes


if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {/* left swipe */
alert('left!');
} else {/* right swipe */
alert('right!');
}
} else {
if ( yDiff > 0 ) {/* up swipe */
alert('Up!');
} else { /* down swipe */
alert('Down!');
}
}
/* reset values */
xDown = null;
yDown = null;
}
};

小开

根据@givanse的回答，你可以用classes这样做:

class Swipe {
constructor(element) {
this.xDown = null;
this.yDown = null;
this.element = typeof(element) === 'string' ? document.querySelector(element) : element;


this.element.addEventListener('touchstart', function(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}.bind(this), false);


}


onLeft(callback) {
this.onLeft = callback;


return this;
}


onRight(callback) {
this.onRight = callback;


return this;
}


onUp(callback) {
this.onUp = callback;


return this;
}


onDown(callback) {
this.onDown = callback;


return this;
}


handleTouchMove(evt) {
if ( ! this.xDown || ! this.yDown ) {
return;
}


var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;


this.xDiff = this.xDown - xUp;
this.yDiff = this.yDown - yUp;


if ( Math.abs( this.xDiff ) > Math.abs( this.yDiff ) ) { // Most significant.
if ( this.xDiff > 0 ) {
this.onLeft();
} else {
this.onRight();
}
} else {
if ( this.yDiff > 0 ) {
this.onUp();
} else {
this.onDown();
}
}


// Reset values.
this.xDown = null;
this.yDown = null;
}


run() {
this.element.addEventListener('touchmove', function(evt) {
this.handleTouchMove(evt).bind(this);
}.bind(this), false);
}
}

你可以这样使用它:

// Use class to get element by string.
var swiper = new Swipe('#my-element');
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();


// Get the element yourself.
var swiper = new Swipe(document.getElementById('#my-element'));
swiper.onLeft(function() { alert('You swiped left.') });
swiper.run();


// One-liner.
(new Swipe('#my-element')).onLeft(function() { alert('You swiped left.') }).run();

小开

threshold, timeout swipe, swipeBlockElems添加。

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


const SWIPE_BLOCK_ELEMS = [
'swipBlock',
'handle',
'drag-ruble'
]


let xDown = null;
let yDown = null;
let xDiff = null;
let yDiff = null;
let timeDown = null;
const  TIME_THRESHOLD = 200;
const  DIFF_THRESHOLD = 130;


function handleTouchEnd() {


let timeDiff = Date.now() - timeDown;
if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
if (Math.abs(xDiff) > DIFF_THRESHOLD && timeDiff < TIME_THRESHOLD) {
if (xDiff > 0) {
// console.log(xDiff, TIME_THRESHOLD, DIFF_THRESHOLD)
SWIPE_LEFT(LEFT) /* left swipe */
} else {
// console.log(xDiff)
SWIPE_RIGHT(RIGHT) /* right swipe */
}
} else {
console.log('swipeX trashhold')
}
} else {
if (Math.abs(yDiff) > DIFF_THRESHOLD && timeDiff < TIME_THRESHOLD) {
if (yDiff > 0) {
/* up swipe */
} else {
/* down swipe */
}
} else {
console.log('swipeY trashhold')
}
}
/* reset values */
xDown = null;
yDown = null;
timeDown = null;
}
function containsClassName (evntarget , classArr) {
for (var i = classArr.length - 1; i >= 0; i--) {
if( evntarget.classList.contains(classArr[i]) ) {
return true;
}
}
}
function handleTouchStart(evt) {
let touchStartTarget = evt.target;
if( containsClassName(touchStartTarget, SWIPE_BLOCK_ELEMS) ) {
return;
}
timeDown = Date.now()
xDown = evt.touches[0].clientX;
yDown = evt.touches[0].clientY;
xDiff = 0;
yDiff = 0;


}


function handleTouchMove(evt) {
if (!xDown || !yDown) {
return;
}


var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;




xDiff = xDown - xUp;
yDiff = yDown - yUp;
}

小开

我发现@givanse的答案是最可靠和最兼容的多个移动浏览器，用于注册滑动操作。

然而，在他的代码中有一个改变需要使它在使用jQuery的现代移动浏览器中工作。

如果使用了jQuery， __abc0将不存在，并导致undefined，应该由event.originalEvent.touches取代。如果没有jQuery， event.touches应该可以正常工作。

所以解就是，

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


var xDown = null;
var yDown = null;


function handleTouchStart(evt) {
xDown = evt.originalEvent.touches[0].clientX;
yDown = evt.originalEvent.touches[0].clientY;
};


function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}


var xUp = evt.originalEvent.touches[0].clientX;
var yUp = evt.originalEvent.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;
};

测试:

安卓: Chrome, UC浏览器
iOS: Safari, Chrome, UC浏览器

小开

我遇到了触摸端处理程序连续发射的问题，而用户正在拖着一个手指。我不知道这是不是因为我做错了什么但是我重新连接了这个用touchmove来累积移动touchend实际上触发了回调。

我还需要大量这样的实例，所以我添加了启用/禁用方法。

还有一个阈值，短刷不会触发。每次Touchstart 0的计数器。

您可以动态地更改target_node。创建时启用是可选选项。

/** Usage: */
touchevent = new Modules.TouchEventClass(callback, target_node);
touchevent.enable();
touchevent.disable();


/**
*
*   Touch event module
*
*   @param method   set_target_mode
*   @param method   __touchstart
*   @param method   __touchmove
*   @param method   __touchend
*   @param method   enable
*   @param method   disable
*   @param function callback
*   @param node     target_node
*/
Modules.TouchEventClass = class {


constructor(callback, target_node, enable=false) {


/** callback function */
this.callback = callback;


this.xdown = null;
this.ydown = null;
this.enabled = false;
this.target_node = null;


/** move point counts [left, right, up, down] */
this.counts = [];


this.set_target_node(target_node);


/** Enable on creation */
if (enable === true) {
this.enable();
}


}


/**
*   Set or reset target node
*
*   @param string/node target_node
*   @param string      enable (optional)
*/
set_target_node(target_node, enable=false) {


/** check if we're resetting target_node */
if (this.target_node !== null) {


/** remove old listener */
this.disable();
}


/** Support string id of node */
if (target_node.nodeName === undefined) {
target_node = document.getElementById(target_node);
}


this.target_node = target_node;


if (enable === true) {
this.enable();
}
}


/** enable listener */
enable() {
this.enabled = true;
this.target_node.addEventListener("touchstart", this.__touchstart.bind(this));
this.target_node.addEventListener("touchmove", this.__touchmove.bind(this));
this.target_node.addEventListener("touchend", this.__touchend.bind(this));
}


/** disable listener */
disable() {
this.enabled = false;
this.target_node.removeEventListener("touchstart", this.__touchstart);
this.target_node.removeEventListener("touchmove", this.__touchmove);
this.target_node.removeEventListener("touchend", this.__touchend);
}


/** Touchstart */
__touchstart(event) {
event.stopPropagation();
this.xdown = event.touches[0].clientX;
this.ydown = event.touches[0].clientY;


/** reset count of moves in each direction, [left, right, up, down] */
this.counts = [0, 0, 0, 0];
}


/** Touchend */
__touchend(event) {
let max_moves = Math.max(...this.counts);
if (max_moves > 500) { // set this threshold appropriately
/** swipe happened */
let index = this.counts.indexOf(max_moves);
if (index == 0) {
this.callback("left");
} else if (index == 1) {
this.callback("right");
} else if (index == 2) {
this.callback("up");
} else {
this.callback("down");
}
}
}


/** Touchmove */
__touchmove(event) {


event.stopPropagation();
if (! this.xdown || ! this.ydown) {
return;
}


let xup = event.touches[0].clientX;
let yup = event.touches[0].clientY;


let xdiff = this.xdown - xup;
let ydiff = this.ydown - yup;


/** Check x or y has greater distance */
if (Math.abs(xdiff) > Math.abs(ydiff)) {
if (xdiff > 0) {
this.counts[0] += Math.abs(xdiff);
} else {
this.counts[1] += Math.abs(xdiff);
}
} else {
if (ydiff > 0) {
this.counts[2] += Math.abs(ydiff);
} else {
this.counts[3] += Math.abs(ydiff);
}
}
}
}

小开

使用两个:

jQuery移动:在大多数情况下工作，特别是当你开发的应用程序使用其他jQuery插件时，最好使用jQuery移动控件。访问这里:https://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp

锤子时间!是最好的，轻量级和快速的基于javascript的库。访问这里:https://hammerjs.github.io/

小开

我将这里的一些答案合并到一个脚本中，该脚本使用CustomEvent在DOM中触发滑动事件。将0.7k swiped-events.min.js脚本添加到页面，并监听刷卡事件:

刷卡

document.addEventListener('swiped', function(e) {
console.log(e.target); // the element that was swiped
console.log(e.detail.dir); // swiped direction
});

swiped-left

document.addEventListener('swiped-left', function(e) {
console.log(e.target); // the element that was swiped
});

swiped-right

document.addEventListener('swiped-right', function(e) {
console.log(e.target); // the element that was swiped
});

swiped-up

document.addEventListener('swiped-up', function(e) {
console.log(e.target); // the element that was swiped
});

swiped-down

document.addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});

你也可以直接附加到一个元素:

document.getElementById('myBox').addEventListener('swiped-down', function(e) {
console.log(e.target); // the element that was swiped
});

可选配置

你可以指定以下属性来调整页面中的滑动交互功能(这些都是可选的)。

<div data-swipe-threshold="10"
data-swipe-timeout="1000"
data-swipe-ignore="false">
Swiper, get swiping!
</div>

要在应用程序范围内设置默认值，请在最顶部的元素上设置配置属性:

<body data-swipe-threshold="100" data-swipe-timeout="250">
<div>Swipe me</div>
<div>or me</div>
</body>

源代码在Github上可用

小开

如果你只需要滑动，你最好只使用你需要的部分。这应该适用于任何触摸设备

这是经过gzip压缩，缩小，babel等大约450字节。

我根据其他答案编写了下面的类，它使用移动百分比而不是像素，以及一个事件分派器模式来挂钩/取消挂钩。

像这样使用它:

const dispatcher = new SwipeEventDispatcher(myElement);
dispatcher.on('SWIPE_RIGHT', () => { console.log('I swiped right!') })

export class SwipeEventDispatcher {
constructor(element, options = {}) {
this.evtMap = {
SWIPE_LEFT: [],
SWIPE_UP: [],
SWIPE_DOWN: [],
SWIPE_RIGHT: []
};


this.xDown = null;
this.yDown = null;
this.element = element;
this.options = Object.assign({ triggerPercent: 0.3 }, options);


element.addEventListener('touchstart', evt => this.handleTouchStart(evt), false);
element.addEventListener('touchend', evt => this.handleTouchEnd(evt), false);
}


on(evt, cb) {
this.evtMap[evt].push(cb);
}


off(evt, lcb) {
this.evtMap[evt] = this.evtMap[evt].filter(cb => cb !== lcb);
}


trigger(evt, data) {
this.evtMap[evt].map(handler => handler(data));
}


handleTouchStart(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}


handleTouchEnd(evt) {
const deltaX = evt.changedTouches[0].clientX - this.xDown;
const deltaY = evt.changedTouches[0].clientY - this.yDown;
const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY);
const activePct = distMoved / this.element.offsetWidth;


if (activePct > this.options.triggerPercent) {
if (Math.abs(deltaX) > Math.abs(deltaY)) {
deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT');
} else {
deltaY > 0 ? this.trigger('SWIPE_UP') : this.trigger('SWIPE_DOWN');
}
}
}
}


export default SwipeEventDispatcher;

小开

一个如何使用偏移量的例子。

// at least 100 px are a swipe
// you can use the value relative to screen size: window.innerWidth * .1
const offset = 100;
let xDown, yDown


window.addEventListener('touchstart', e => {
const firstTouch = getTouch(e);


xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
});


window.addEventListener('touchend', e => {
if (!xDown || !yDown) {
return;
}


const {
clientX: xUp,
clientY: yUp
} = getTouch(e);
const xDiff = xDown - xUp;
const yDiff = yDown - yUp;
const xDiffAbs = Math.abs(xDown - xUp);
const yDiffAbs = Math.abs(yDown - yUp);


// at least <offset> are a swipe
if (Math.max(xDiffAbs, yDiffAbs) < offset ) {
return;
}


if (xDiffAbs > yDiffAbs) {
if ( xDiff > 0 ) {
console.log('left');
} else {
console.log('right');
}
} else {
if ( yDiff > 0 ) {
console.log('up');
} else {
console.log('down');
}
}
});


function getTouch (e) {
return e.changedTouches[0]
}

小开

我也合并了一些答案，主要是第一个和第二个与类，下面是我的版本:

export default class Swipe {
constructor(options) {
this.xDown = null;
this.yDown = null;


this.options = options;


this.handleTouchStart = this.handleTouchStart.bind(this);
this.handleTouchMove = this.handleTouchMove.bind(this);


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


}


onLeft() {
this.options.onLeft();
}


onRight() {
this.options.onRight();
}


onUp() {
this.options.onUp();
}


onDown() {
this.options.onDown();
}


static getTouches(evt) {
return evt.touches      // browser API


}


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


handleTouchMove(evt) {
if ( ! this.xDown || ! this.yDown ) {
return;
}


let xUp = evt.touches[0].clientX;
let yUp = evt.touches[0].clientY;


let xDiff = this.xDown - xUp;
let yDiff = this.yDown - yUp;




if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 && this.options.onLeft) {
/* left swipe */
this.onLeft();
} else if (this.options.onRight) {
/* right swipe */
this.onRight();
}
} else {
if ( yDiff > 0 && this.options.onUp) {
/* up swipe */
this.onUp();
} else if (this.options.onDown){
/* down swipe */
this.onDown();
}
}


/* reset values */
this.xDown = null;
this.yDown = null;
}
}

之后可以这样使用:

let swiper = new Swipe({
onLeft() {
console.log('You swiped left.');
}
});

当你只想调用“onLeft”方法时，它有助于避免控制台错误。

小开

简单的水平滑动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()
})

垂直滑动也可以使用相同的逻辑。

小开

首先使用鼠标事件原型实现它可能会更容易一些。

这里有很多答案，包括顶部，应该谨慎使用，因为它们不考虑边界情况，特别是在边界框周围。

看到的:

你需要尝试捕捉边缘情况和行为，比如指针在结束前移动到元素之外。

滑动是一种非常基本的手势，它是一种更高级别的界面指针交互处理，大致介于处理原始事件和手写识别之间。

没有一种确切的方法来检测滑动或投掷，尽管几乎所有方法都遵循一个基本原则，即通过距离和速度或速度的阈值来检测元素的运动。你可以简单地说，如果在给定的时间内，在给定的方向上有65%的屏幕大小的移动，那么这就是一次滑动。具体在哪里划定界限以及如何计算取决于你自己。

有些人可能还会从某个方向的动量角度以及元素释放时它被推离屏幕的距离来看待它。这是更清晰的粘滞滑动，元素可以拖动，然后释放，要么反弹，要么飞出屏幕，就像弹性断裂。

最好是找到一个手势库，你可以移植或重用，通常用于一致性。这里的许多例子都过于简单，将滑动记录为任何方向上最轻微的触摸。

安卓将是明显的选择，尽管有相反的问题，它过于复杂。

许多人似乎把这个问题误解为某个方向的任何运动。滑动是一种面向单一方向的广泛且相对简短的运动(尽管可能是弧形的并具有一定的加速属性)。抛掷是类似的，但它是指在自身动量的作用下，随意地将物体推离一定距离。

这两者非常相似，以至于一些库可能只提供可以互换使用的fling或swipe。在平面屏幕上，很难真正区分这两种手势，一般来说，人们都在做这两种动作(滑动物理屏幕，但投掷屏幕上显示的UI元素)。

你最好的选择就是不要自己动手。已经有大量用于检测简单手势的JavaScript库。

小开

我只想检测左右滑动，但是仅当触摸事件结束时触发动作，所以我稍微修改了@givanse的伟大答案来做到这一点。

为什么要这么做?例如，在滑动时，用户注意到他最终不想滑动，他可以在原来的位置移动手指(一个非常流行的“约会”;手机应用程序可以做到这一点;))，然后“右滑”;事件被取消。

所以为了避免“右滑”;事件仅仅因为水平上有3px的差异，我添加了一个阈值，在这个阈值下事件将被丢弃:为了有一个“右滑”;事件，用户必须滑动至少1/3的浏览器宽度(当然你可以修改这个)。

所有这些小细节都增强了用户体验。

请注意，目前，“触摸、捏、缩放”;如果在缩放过程中，其中一个手指做了一个大的水平移动，可能会被检测为滑动。

这是(Vanilla JS)代码:

var xDown = null, yDown = null, xUp = null, yUp = null;
document.addEventListener('touchstart', touchstart, false);
document.addEventListener('touchmove', touchmove, false);
document.addEventListener('touchend', touchend, false);
function touchstart(evt) { const firstTouch = (evt.touches || evt.originalEvent.touches)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }
function touchmove(evt) { if (!xDown || !yDown ) return; xUp = evt.touches[0].clientX; yUp = evt.touches[0].clientY; }
function touchend(evt) {
var xDiff = xUp - xDown, yDiff = yUp - yDown;
if ((Math.abs(xDiff) > Math.abs(yDiff)) && (Math.abs(xDiff) > 0.33 * document.body.clientWidth)) {
if (xDiff < 0)
document.getElementById('leftnav').click();
else
document.getElementById('rightnav').click();
}
xDown = null, yDown = null;
}

小开

添加到这个答案在这里。这个增加了对鼠标事件的支持，用于桌面测试:

<!--scripts-->
class SwipeEventDispatcher {
constructor(element, options = {}) {
this.evtMap = {
SWIPE_LEFT: [],
SWIPE_UP: [],
SWIPE_DOWN: [],
SWIPE_RIGHT: []
};


this.xDown = null;
this.yDown = null;
this.element = element;
this.isMouseDown = false;
this.listenForMouseEvents = true;
this.options = Object.assign({ triggerPercent: 0.3 }, options);


element.addEventListener('touchstart', evt => this.handleTouchStart(evt), false);
element.addEventListener('touchend', evt => this.handleTouchEnd(evt), false);
element.addEventListener('mousedown', evt => this.handleMouseDown(evt), false);
element.addEventListener('mouseup', evt => this.handleMouseUp(evt), false);
}


on(evt, cb) {
this.evtMap[evt].push(cb);
}


off(evt, lcb) {
this.evtMap[evt] = this.evtMap[evt].filter(cb => cb !== lcb);
}


trigger(evt, data) {
this.evtMap[evt].map(handler => handler(data));
}


handleTouchStart(evt) {
this.xDown = evt.touches[0].clientX;
this.yDown = evt.touches[0].clientY;
}


handleMouseDown(evt) {
if (this.listenForMouseEvents==false) return;
this.xDown = evt.clientX;
this.yDown = evt.clientY;
this.isMouseDown = true;
}


handleMouseUp(evt) {
if (this.isMouseDown == false) return;
const deltaX = evt.clientX - this.xDown;
const deltaY = evt.clientY - this.yDown;
const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY);
const activePct = distMoved / this.element.offsetWidth;


if (activePct > this.options.triggerPercent) {
if (Math.abs(deltaX) > Math.abs(deltaY)) {
deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT');
} else {
deltaY > 0 ? this.trigger('SWIPE_UP') : this.trigger('SWIPE_DOWN');
}
}
}


handleTouchEnd(evt) {
const deltaX = evt.changedTouches[0].clientX - this.xDown;
const deltaY = evt.changedTouches[0].clientY - this.yDown;
const distMoved = Math.abs(Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY);
const activePct = distMoved / this.element.offsetWidth;


if (activePct > this.options.triggerPercent) {
if (Math.abs(deltaX) > Math.abs(deltaY)) {
deltaX < 0 ? this.trigger('SWIPE_LEFT') : this.trigger('SWIPE_RIGHT');
} else {
deltaY > 0 ? this.trigger('SWIPE_UP') : this.trigger('SWIPE_DOWN');
}
}
}
}


// add a listener on load
window.addEventListener("load", function(event) {
const dispatcher = new SwipeEventDispatcher(document.body);
dispatcher.on('SWIPE_RIGHT', () => { console.log('I swiped right!') })
dispatcher.on('SWIPE_LEFT', () => { console.log('I swiped left!') })
});

小开

我重做< >强@givanse < / >强的解决方案功能作为一个React钩子。输入是一些可选的事件监听器，输出是一个功能性的ref(需要是功能性的，以便当/如果ref改变时钩子可以重新运行)。

还添加了垂直/水平滑动阈值参数，这样小的运动不会意外触发事件监听器，但这些可以设置为0，以更接近地模拟原始答案。

提示:为获得最佳性能，事件监听器输入函数应该被记住。

function useSwipeDetector({
// Event listeners.
onLeftSwipe,
onRightSwipe,
onUpSwipe,
onDownSwipe,


// Threshold to detect swipe.
verticalSwipeThreshold = 50,
horizontalSwipeThreshold = 30,
}) {
const [domRef, setDomRef] = useState(null);
const xDown = useRef(null);
const yDown = useRef(null);


useEffect(() => {
if (!domRef) {
return;
}


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


function handleTouchMove(evt) {
if (!xDown.current || !yDown.current) {
return;
}


const [firstTouch] = evt.touches;
const xUp = firstTouch.clientX;
const yUp = firstTouch.clientY;
const xDiff = xDown.current - xUp;
const yDiff = yDown.current - yUp;


if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
if (xDiff > horizontalSwipeThreshold) {
if (onRightSwipe) onRightSwipe();
} else if (xDiff < -horizontalSwipeThreshold) {
if (onLeftSwipe) onLeftSwipe();
}
} else {
if (yDiff > verticalSwipeThreshold) {
if (onUpSwipe) onUpSwipe();
} else if (yDiff < -verticalSwipeThreshold) {
if (onDownSwipe) onDownSwipe();
}
}
};


function handleTouchEnd() {
xDown.current = null;
yDown.current = null;
}


domRef.addEventListener("touchstart", handleTouchStart, false);
domRef.addEventListener("touchmove", handleTouchMove, false);
domRef.addEventListener("touchend", handleTouchEnd, false);


return () => {
domRef.removeEventListener("touchstart", handleTouchStart);
domRef.removeEventListener("touchmove", handleTouchMove);
domRef.removeEventListener("touchend", handleTouchEnd);
};
}, [domRef, onLeftSwipe, onRightSwipe, onUpSwipe, onDownSwipe, verticalSwipeThreshold, horizontalSwipeThreshold]);


return (ref) => setDomRef(ref);
};

小开

我必须为旋转木马编写一个简单的脚本，以检测向左或向右的滑动。

我使用指针事件代替触摸事件。

我希望这对个人有用，我欢迎任何改进我的代码的见解;我觉得很不好意思加入这个线程与显著优秀的JS开发人员。

function getSwipeX({elementId}) {


this.e               = document.getElementsByClassName(elementId)[0];
this.initialPosition = 0;
this.lastPosition    = 0;
this.threshold       = 200;
this.diffInPosition  = null;
this.diffVsThreshold = null;
this.gestureState    = 0;


this.getTouchStart = (event) => {
event.preventDefault();
if (window.PointerEvent) {
this.e.setPointerCapture(event.pointerId);
}
return this.initalTouchPos = this.getGesturePoint(event);
}


this.getTouchMove  = (event) => {
event.preventDefault();
return this.lastPosition = this.getGesturePoint(event);
}


this.getTouchEnd   = (event) => {
event.preventDefault();
if (window.PointerEvent) {
this.e.releasePointerCapture(event.pointerId);
}
this.doSomething();
this.initialPosition = 0;
}


this.getGesturePoint = (event) => {
this.point = event.pageX
return this.point;
}


this.whatGestureDirection = (event) => {
this.diffInPosition  = this.initalTouchPos - this.lastPosition;
this.diffVsThreshold = Math.abs(this.diffInPosition) > this.threshold;
(Math.sign(this.diffInPosition) > 0) ? this.gestureState = 'L' : (Math.sign(this.diffInPosition) < 0) ? this.gestureState = 'R' : this.gestureState = 'N';
    

return [this.diffInPosition, this.diffVsThreshold, this.gestureState];
}


this.doSomething = (event) => {
let [gestureDelta,gestureThreshold,gestureDirection] = this.whatGestureDirection();


// USE THIS TO DEBUG
console.log(gestureDelta,gestureThreshold,gestureDirection);


if (gestureThreshold) {
(gestureDirection == 'L') ? // LEFT ACTION : // RIGHT ACTION
}
}


if (window.PointerEvent) {
this.e.addEventListener('pointerdown', this.getTouchStart, true);
this.e.addEventListener('pointermove', this.getTouchMove, true);
this.e.addEventListener('pointerup', this.getTouchEnd, true);
this.e.addEventListener('pointercancel', this.getTouchEnd, true);
}
}

可以使用new调用该函数。

window.addEventListener('load', () => {
let test = new getSwipeX({
elementId: 'your_div_here'
});
})

小开

我重做了@ruben-martinez回答使用来自@givanse的惊人的解决方案来处理使用自定义反应钩子的滑动事件。

import React, { useEffect, useRef, useState } from "react";


export default function useSwiper() {
const [domRef, setDomRef] = useState<any>();


const xDown: React.MutableRefObject<number | null> = useRef(null);
const yDown: React.MutableRefObject<number | null> = useRef(null);


useEffect(() => {
if (!domRef) return;


function getTouches(event: React.TouchEvent<HTMLDivElement>) {
return event.touches;
}


function handleTouchStart(event: any) {
const firstTouch = getTouches(event)[0];
xDown.current = firstTouch.clientX;
yDown.current = firstTouch.clientY;
}


function handleTouchMove(event: React.TouchEvent<HTMLDivElement>) {
if (!xDown.current || !yDown.current) return;


const firstTouch = getTouches(event)[0];
const xUp = firstTouch.clientX;
const yUp = firstTouch.clientY;


const xDiff = xDown.current - xUp;
const yDiff = yDown.current - yUp;


if (Math.abs(xDiff) > Math.abs(yDiff)) {
// handle horizontal swipes
if (xDiff > 0) {
// we swiped right
console.log("right");
} else {
// we swiped left
console.log("left");
}
} else {
// handle vertical swipes
if (yDiff > 0) {
// we swiped down
console.log("down");
} else {
// we swiped up
console.log("up");
}
}
}


function handleTouchEnd(event: React.TouchEvent<HTMLDivElement>) {
xDown.current = null;
yDown.current = null;
}




domRef.addEventListener("touchstart", handleTouchStart, false);
domRef.addEventListener("touchmove", handleTouchMove, false);
domRef.addEventListener("touchend", handleTouchEnd, false);


return () => {
domRef.removeEventListener("touchstart", handleTouchStart, false);
domRef.removeEventListener("touchmove", handleTouchMove, false);
domRef.removeEventListener("touchend", handleTouchEnd, false);
};
}, [domRef]);


return (ref: any) => setDomRef(ref);
}

我在实现他的答案时遇到的主要挑战是不知道如何将swipe元素的ref绑定到自定义钩子中的ref。

基本上，所发生的是我们从自定义钩子返回一个函数。这个函数允许我们传入一个来自我们想要监听的滑动动作的元素的ref。自定义钩子接收到ref后，用元素的ref更新钩子状态，从而触发重新渲染，这样我们就有了实际的元素!

这种函数式的ref样式还允许我们对多个元素使用钩子。如下所示，我想使用它的项目列表，以启用滑动删除:)

import useSwiper from "./hooks/useSwipe";


const EntryCard = ({ entry, godMode, reload }: EntryProps) => {
const swiperRef = useSwiper();


const handleEntryClick =
(entry: Entry) => async (event: React.MouseEvent<HTMLDivElement>) => {
if (!godMode) return;


try {
reload((state) => !state);
} catch (err) {
console.log("Error deleting entry: ", err);
}
};


return (
<div className="item" onClick={handleEntryClick(entry)} ref={swiperRef}>
<div className="username">{entry.userName}</div>
<div className="score">{entry.weekScore}</div>
</div>
);
};

PS:你可以把函数传递给钩子来接收滑动值。谢谢:)如果你喜欢，请投票:)

小开

touchStart和touchEnd的句柄:

var handleSwipe = function(elem,callbackOnRight, callbackOnLeft, callbackOnDown,
callbackOnUp) => {


elem.ontouchstart = handleTouchStart;
elem.ontouchend = handleTouchEnd;


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 handleTouchEnd(evt) {
if (!xDown || !yDown) {
return;
}


var xUp = evt.changedTouches[0].clientX;
var yUp = evt.changedTouches[0].clientY;


var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
var minDif = 30;


console.log(`xDiff:${xDiff}, yDiff:${yDiff}`);


if (Math.abs(xDiff) > Math.abs(yDiff)) {
if (xDiff > minDif) {
if (callbackOnLeft)
callbackOnLeft();
} else if (xDiff < -1 * minDif){
if (callbackOnRight)
callbackOnRight();
}
} else {
if (yDiff > minDif) {
if (callbackOnDown)
callbackOnDown();
} else if (yDiff < -1* minDif){
if (callbackOnUp)
callbackOnUp();
}
}
            

xDown = null;
yDown = null;
};
}

小开

你可以监听touchstart和touchend事件，并根据事件数据(Codepen)计算方向和力:

let start = null;
document.addEventListener('touchstart', e => {
const touch = e.changedTouches[0];
start = [touch.clientX, touch.clientY];
});
document.addEventListener('touchend', e => {
const touch = e.changedTouches[0];
const end = [touch.clientX, touch.clientY];
document.body.innerText = `${end[0] - start[0]},${end[1] - start[1]}`;
});

Swipe here

Or you can build a more ergonomic API around this same concept (Codepen):

const removeListener = addSwipeRightListener(document, (force, e) => {
console.info('Swiped right with force: ' + force);
});
// removeListener()

// swipe.js
const {
addSwipeLeftListener,
addSwipeRightListener,
addSwipeUpListener,
addSwipeDownListener,
} = (function() {
// <element, {listeners: [...], handleTouchstart, handleTouchend}>
const elements = new WeakMap();
  

function readTouch(e) {
const touch = e.changedTouches[0];
if (touch == undefined) {
return null;
}
return [touch.clientX, touch.clientY];
}


function addListener(element, cb) {
let elementValues = elements.get(element);
if (elementValues === undefined) {
const listeners = new Set();
const handleTouchstart = e => {
elementValues.start = readTouch(e);
};
const handleTouchend = e => {
const start = elementValues.start;
if (start === null) {
return;
}
const end = readTouch(e);
for (const listener of listeners) {
listener([end[0] - start[0], end[1] - start[1]], e);
}
};
element.addEventListener('touchstart', handleTouchstart);
element.addEventListener('touchend', handleTouchend);
      

elementValues = {
start: null,
listeners,
handleTouchstart,
handleTouchend,
};
elements.set(element, elementValues);
}
elementValues.listeners.add(cb);
return () => deleteListener(element, cb);
}
  

function deleteListener(element, cb) {
const elementValues = elements.get(element);
const listeners = elementValues.listeners;
listeners.delete(cb);
if (listeners.size === 0) {
elements.delete(element);
element.removeEventListener('touchstart', elementValues.handleTouchstart);
element.removeEventListener('touchend', elementValues.handleTouchend);
}
}
  

function addSwipeLeftListener(element, cb) {
return addListener(element, (force, e) => {
const [x, y] = force;
if (x < 0 && -x > Math.abs(y)) {
cb(x, e);
}
});
}


function addSwipeRightListener(element, cb) {
return addListener(element, (force, e) => {
const [x, y] = force;
if (x > 0 && x > Math.abs(y)) {
cb(x, e);
}
});
}
  

function addSwipeUpListener(element, cb) {
return addListener(element, (force, e) => {
const [x, y] = force;
if (y < 0 && -y > Math.abs(x)) {
cb(x, e);
}
});
}
  

function addSwipeDownListener(element, cb) {
return addListener(element, (force, e) => {
const [x, y] = force;
if (y > 0 && y > Math.abs(x)) {
cb(x, e);
}
});
}


return {
addSwipeLeftListener,
addSwipeRightListener,
addSwipeUpListener,
addSwipeDownListener,
}
})();


// app.js


function print(direction, force) {
document.querySelector('#direction').innerText = direction;
document.querySelector('#data').innerText = force;
}


addSwipeLeftListener(document, (force, e) => {
print('left', force);
});


addSwipeRightListener(document, (force, e) => {
print('right', force);
});


addSwipeUpListener(document, (force, e) => {
print('up', force);
});


addSwipeDownListener(document, (force, e) => {
print('down', force);
});

<h1>Swipe <span id="direction"></span></h1>
Force (px): <span id="data"></span>

小开

在这里建议的基础上，我会跟踪手指的编号，因为如果你同时用两个手指触摸，它会在没有滑动的情况下获得X位置，这导致了一个奇怪的行为，而且，你可能想要设置一个“距离”。最小值，这样用户在访问你的网站或应用程序时就不会触发错误的滑动。

//Swipe
let touchstartX = 0
let touchendX = 0
let fingerCount = 0
    

const checkDirection = () => {


const distance = 50 //Minimum distance for the swipe to work


//left
if (touchendX < touchstartX && (touchstartX - touchendX) > distance ){


//Do something cool
   

}
//right
if (touchendX > touchstartX && (touchendX - touchstartX) > distance){


//Do something cooler
}


document.addEventListener('touchstart', e => {


fingerCount = e.touches.length
touchstartX = e.changedTouches[0].clientX
     

})


document.addEventListener('touchend', e => {


touchendX = e.changedTouches[0].clientX
if(fingerCount === 1){
checkDirection()
}


})

小开

函数检查水平方向和垂直方向，以确定哪个滑动更长，以防止执行两个指令，因为不可能进行完美的单向滑动。滑动总是在X和Y上有偏差。

let touchstartX = 0;
let touchendX = 0;
let touchstartY = 0;
let touchendY = 0;


function checkDirection() {
let difX = touchstartX - touchendX;
let difY = touchstartY - touchendY;
if (Math.abs(difX) > Math.abs(difY)) {
if (touchendX < touchstartX) {/*left*/}
if (touchendX > touchstartX) {/*right*/}
} else {
if (touchendY < touchstartY) {/*up*/}
if (touchendY > touchstartY) {/*down*/}
}
};
document.addEventListener('touchstart', e => {
e.preventDefault();
touchstartX = e.changedTouches[0].screenX;
touchstartY = e.changedTouches[0].screenY;
});


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