Only swipeone is working with jGestures

Question

I\'m trying to implement touch evens with jGestures. swipeone works fine but anything else (swipeleft, swiperight etc) is not firing.

        
                      

              相关标签:
       
      

Answer 1

This is already answered here:

stackoverflow about jGesture swipe events

The trick is:

… .bind('swipeone swiperight', … 

You have to bind it to both events. only swiperight won't work. took me 3 hrs to figure that out :D

Best, Rico

Answer 2

SwipeLeft, SwipeRight, -Up and -Down are kind of poorly implemented. They are only triggered if you stay EXACTLY on the axis where you started the touch event. For example, SwipeRight will only work if your finger moves from (X,Y) (120, 0) to (250, 0).

If the Y-Coordinates from Start- and Endpoint differ, it's not gonna work.

jGestures.js (ca. line 1095) should better look something like this (readable):

/**
 * U Up, LU LeftUp, RU RightUp, etc.
 * 
 *  \U|U/
 * LU\|/RU
 *L---+---R
 * LD/|\RD
 *  /D|D\
 *
 */
if ( _bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) {
    _bIsSwipe = true;
    var deltaX = _oDetails.delta[0].lastX;
    var deltaY = _oDetails.delta[0].lastY;
    var hor = ver = '';
    if (deltaX > 0) { // right
        hor = 'right';
        if (deltaY > 0) {
            ver = 'down'
        } else {
            ver = 'up';
        }

        if (Math.abs(deltaY) < deltaX * 0.3) {
            ver = '';
        } else if (Math.abs(deltaY) >= deltaX * 2.2) {
            hor = '';
        }
    } else { // left
        hor = 'left';
        if (deltaY > 0) {
            ver = 'down'
        } else {
            ver = 'up';
        }

        if (Math.abs(deltaY) < Math.abs(deltaX) * 0.3) {
            ver = '';
        } else if (Math.abs(deltaY) > Math.abs(deltaX) * 2.2) {
            hor = '';
        }
    }
    // (_oDetails.delta[0].lastX < 0) -> 'left'
    // (_oDetails.delta[0].lastY > 0) -> 'down'
    // (_oDetails.delta[0].lastY < 0) -> 'up'
    // alert('function swipe_' + hor + '_' + ver);

    _oDetails.type = ['swipe', hor, ver].join('');
    _$element.triggerHandler(_oDetails.type, _oDetails);
}

Answer 3

I was just looking for the same thing and figured out that you can try all in the same function like so:

$("#wrap").on('swipeleft swipeleftup swipeleftdown', function(e){
    doSomething();
});

as well as the equivalent for right:

$("#wrap").on('swiperight swiperightup swiperightdown', function(e){
    doSomething();
});

You can list multiple events together with the on method.

Answer 4

try this:

$('#wrap').bind('swipeone', function (event, obj) {
   var direction=obj.description.split(":")[2]
   if(direction=="left"){
        doSomething();
   }
});

Answer 5

I'm using Willian El-Turk's solution like this:

// jGestures http://stackoverflow.com/a/14403116/796538
$('.slides').bind('swipeone', function (event, obj) {
   var direction=obj.description.split(":")[2]
   if (direction=="left"){
        //alert("left");
   } else if (direction=="right"){
        //alert("right");
   }
});

Excellent solution, except because it executes as soon as there's movement left to right it's really sensitive even with more of a vertical swipe. it'd be great to have a minimum swipe distance on the x axis. Something like:

if (direction=="left" && distance>=50px){ 

Except i'm not sure how... Please feel free to edit this !

Edit - You can check distance (x axis) like this, it works for me :

$('.slides').bind('swipeone', function (event, obj) {

    var xMovement = Math.abs(obj.delta[0].lastX);
    var direction=obj.description.split(":")[2]

    //I think 75 treshold is good enough. You can change this.

    if(xMovement >= 75) {
        //continue to event
        //ONLY x axis swipe here. (left-right)

        if (direction=="left"){
            //alert("left");
        } else if (direction=="right"){
            //alert("right");
        }
    }
}

Answer 6

replace the cases on line 1326 in version 0.90.1 with this code

                if ( _bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) {
                    _bIsSwipe      = true;
                    _oDetails.type = 'swipe';
                    _vLimit        = $(window).height()/4;
                    _wLimit        = $(window).width()/4;
                    _sMoveY        = _oDetails.delta[0].lastY;
                    _sMoveX        = _oDetails.delta[0].lastX;
                    _sMoveYCompare = _sMoveY.toString().replace('-','');
                    _sMoveXCompare = _sMoveX.toString().replace('-','');

                    if(_sMoveX < 0){
                        if(_oDetails.delta[0].lastY < _vLimit) {
                            if(_sMoveYCompare < _vLimit) {
                                _oDetails.type += 'left';
                            }
                        }
                    }else if(_sMoveX > 0){
                        if(_sMoveYCompare < _vLimit) {
                            _oDetails.type += 'right'
                        }
                    }else{
                        _oDetails.type += '';
                    }

                    if(_sMoveY < 0){
                        if(_sMoveXCompare < _wLimit) {
                            _oDetails.type += 'up'      
                        }
                    }else if(_sMoveY > 0){
                        if(_sMoveXCompare < _wLimit) {
                            _oDetails.type += 'down'
                        }
                    }else{
                        _oDetails.type += '';
                    }
                    // alert(_oDetails.type);
                    _$element.triggerHandler(_oDetails.type, _oDetails);
                }