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

你怎么能检测到用户用JavaScript在网页上的某个方向上滑动手指?

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


简单的香草JS代码示例:

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 ) ) {/*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测试。

如果您使用JQuery,请使用evt.originalEvent.touches而不是evt.touches


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


你有没有试过hammer.js? http://eightmedia.github.com/hammer.js/也适用于Windows手机..

链接地址: http://www.djcxy.com/p/91243.html

上一篇: Detect a finger swipe through JavaScript on the iPhone and Android

下一篇: view/motionEvent cannot be resolved to a variable swipe