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

Question

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

827*_*827 247 javascript iphone android swipe

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

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

Answer 1

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

Run Code Online (Sandbox Code Playgroud)

在Android中测试过.

这很好用,但左/右和上/下都是向后的. (3认同)
originalEvent是一个JQuery属性.如果你在没有JQuery的情况下运行纯javascript,应该省略它.如果没有JQuery运行,当前代码会引发异常. (3认同)
看起来很酷又简单，知道这个事件“touchstart”、“touchmove”的支持是什么吗？ (2认同)

Answer 2

Dai*_*Lak 43

我发现这个jquery touchwipe插件适用于我的第一代ipod touch和我的droid令人难以置信. http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

工作得很好,简单,谢谢.我已经对它进行了现代化并使其使用jQuery事件:https://github.com/marcandre/detect_swipe (8认同)

Answer 3

Dam*_*ica 34

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

let touchstartX = 0
let touchendX = 0

const slider = document.getElementById('slider')

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

哈哈，这很简单，甚至可以指定“行程距离”。 (7认同)
到目前为止最好的答案..遗憾的是它没有更多的赞成票.. (7认同)
很好的答案，因为它很简单！值得注意的是，如果触摸点具有最小的 x 距离，则使用此代码，垂直滑动也会被检测为水平滑动。 (5认同)
@MattiaRasulo 可能需要添加上下滑动 (3认同)
这是一些非常好的代码，如果您想要上下操作，您所需要做的就是更改其状态 X 的位置并替换为 Y。 Easyyyy (2认同)

Answer 4

Mar*_*lln 27

基于@ 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);
    }
}

Run Code Online (Sandbox Code Playgroud)

你可以像这样使用它:

// 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();

Run Code Online (Sandbox Code Playgroud)

这段代码可能不会工作,因为你在尝试调用未定义的`.bind`时会遇到异常,因为你的`handleTouchMove`实际上没有返回任何东西.使用`this`调用函数时调用bind也没用,因为它已经绑定到当前上下文 (6认同)
我刚刚删除了.bind（this）;，它正常运行。谢谢@nicholas_r (3认同)
如果您想等到滑动ENDS（意思是在他们举起手指或鼠标悬停后），请将“ touches [0]”更改为“ changedTouches [0]”，并将事件处理程序将“ handleTouchMove”更改为“ handleTouchEnd”。 (3认同)

Answer 5

Jor*_*rik 19

你试过hammer.js吗？http://eightmedia.github.com/hammer.js/ 也适用于Windows手机..

Answer 6

hel*_*dre 14

之前我用过的是你必须检测mousedown事件,记录它的x,y位置(以相关者为准)然后检测mouseup事件,然后减去这两个值.

我相信它是touchstart,touchmove,touchcancel和touchend,可以使用,而不是mousedown或mouseup. (26认同)

Answer 7

Gri*_*inn 14

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

例

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

Run Code Online (Sandbox Code Playgroud)

如果不希望jQuery mobile操作UI,请参阅:http://stackoverflow.com/questions/8648596/how-to-use-jquery-mobile-for-its-touch-event-support-only-no- UI的改进#答案 - 12631480 (4认同)

Answer 8

Joh*_*rty 11

我将这里的一些答案合并到一个脚本中,该脚本使用CustomEvent来触发DOM中的滑动事件.将0.7k pure-swipe.min.js脚本添加到您的页面并侦听滑动事件:

刷卡左

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

Run Code Online (Sandbox Code Playgroud)

刷卡右

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

Run Code Online (Sandbox Code Playgroud)

刷卡机

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

Run Code Online (Sandbox Code Playgroud)

刷卡降

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

Run Code Online (Sandbox Code Playgroud)

您还可以直接附加到元素:

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

Run Code Online (Sandbox Code Playgroud)

可选配置

您可以指定以下属性来调整页面中滑动交互功能的方式(这些是可选的).

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

Run Code Online (Sandbox Code Playgroud)

源代码可在Github上找到

Hammer.js 似乎不再维护了 (3认同)
谢谢，它工作完美！我用你的库替换了 Hammer.js，因为前者不适用于浏览器缩放，这是一个严重的可用性问题。使用这个库，缩放可以正常工作（在Android上测试） (2认同)

Answer 9

nas*_*eez 10

我发现@givanse很棒的答案是在多个移动浏览器中最可靠和最兼容的注册滑动操作.

但是,他的代码需要更改才能使其在现代移动浏览器中使用jQuery.

event.touches如果jQuery使用并且导致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;                                             
};

Run Code Online (Sandbox Code Playgroud)

测试:

Android:Chrome,UC浏览器
iOS:Safari,Chrome,UC浏览器

Answer 10

Bas*_*asj 7

我只想检测向左和向右滑动，但仅在触摸事件结束时触发操作，因此我稍微修改了@givanse 的出色答案来做到这一点。

为什么要这么做？例如，如果在滑动时，用户注意到他最终不想滑动，他可以将手指移动到原始位置（一个非常流行的“约会”电话应用程序就是这样做的;）），然后“向右滑动”活动被取消。

因此，为了避免仅仅因为水平方向存在 3px 差异而发生“向右滑动”事件，我添加了一个阈值，低于该阈值的事件将被丢弃：为了发生“向右滑动”事件，用户必须至少滑动浏览器宽度的1/3（当然你可以修改这个）。

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

请注意，目前，如果两根手指之一在捏合缩放期间进行较大的水平移动，则“触摸捏合缩放”可能会被检测为滑动。

这是（普通 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; }
Run Code Online (Sandbox Code Playgroud)

Answer 11

Mar*_*une 6

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

Answer 12

小智 6

一些最新的答案(无法评论......)来处理短暂的滑动

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

Run Code Online (Sandbox Code Playgroud)

Answer 13

Ser*_*uns 5

trashold,超时滑动,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_TRASHOLD = 200;
const  DIFF_TRASHOLD = 130;

function handleTouchEnd() {

let timeDiff = Date.now() - timeDown; 
if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
  if (Math.abs(xDiff) > DIFF_TRASHOLD && timeDiff < TIME_TRASHOLD) {
    if (xDiff > 0) {
      // console.log(xDiff, TIME_TRASHOLD, DIFF_TRASHOLD)
      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_TRASHOLD && timeDiff < TIME_TRASHOLD) {
    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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 14

1.2*_*tts 5

在这里添加这个答案。这增加了对鼠标事件的支持，以便在桌面上进行测试：

<!--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!') })
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，6 月前
查看次数：	229984 次
最近记录：	5 年，10 月前