Javascript 只有SwipaOne在使用jGestures

我正在尝试用Jgest实现touch Even。swipeone可以正常工作，但其他任何东西（swipeleft、swiperight等）都不能点火

<div id="wrap" style="height:500px; width:500px; background: blue;">

    </div>
    <script type="text/javascript">
        $('#wrap').bind('swipeleft', function(){
            alert("test");
        });
    </script>

$（'#wrap'）.bind（'swipleft'，function（）{
警报（“测试”）；
});

---

这只是我做的一个测试页面。在我的主要项目中，它实际上在某一点上起作用，但似乎毫无原因地停止了，甚至在我恢复到旧版本时也没有。我尝试了不同版本的jGestures，但运气不佳。

SwipeLeft、SwiperRight、-Up和-Down的实现有点糟糕。只有当您恰好停留在开始触摸事件的轴上时，才会触发这些事件。 例如，只有当手指从（X，Y）（120，0）移动到（250，0）时，SwipeRight才会工作

如果从起点到终点的Y坐标不同，它就不起作用

jGestures.js（约1095行）最好是这样（可读）：

/**
*U向上，LU向上，RU向上，等等。
* 
*\U | U/
*鲁\|/RU
*L---+--R
*LD/|\RD
*/D | D\
*
*/
如果（_bHasTouches&&u bHasMoved==true&&u bhasswipeposture==true）{
_bIsSwipe=true；
var deltaX=\u oDetails.delta[0].lastX；
var deltaY=_oDetails.delta[0].lastY；
var hor=ver=''；
如果（deltaX>0）{//正确
hor=‘对’；
如果（三角洲>0）{
ver=‘向下’
}否则{
ver=‘向上’；
}
如果（数学绝对值（deltaY）=deltaX*2.2）{
hor=''；
}
}否则{//左
hor=‘左’；
如果（三角洲>0）{
ver=‘向下’
}否则{
ver=‘向上’；
}
如果（数学绝对值（deltaY）<数学绝对值（deltaX）*0.3）{
ver=''；
}else if（数学abs（deltaY）>数学abs（deltaX）*2.2）{
hor=''；
}
}
//（_oDetails.delta[0].lastX<0）->“左”
//（_oDetails.delta[0].lastY>0）->“向下”
//（_oDetails.delta[0].lastY<0）->“向上”
//警报（'功能滑动'+hor+'+ver）；
_oDetails.type=['swipe'，hor，ver].join（“”）；
_$element.triggerHandler（\u oDetails.type，\u oDetails）；
}

您可以尝试以下两种方法：

$('#wrap').bind('swipeleftup', function(){
    doSomething();
});

$('#wrap').bind('swipeleftdown', function(){
    doSomething();
});

---

忘记“swipeleft”，因为它很难触发，正如前面提到的。

我只是在寻找同样的东西，并发现您可以在相同的函数中尝试所有功能，如下所示：

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

以及权利的等价物：

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

您可以使用on方法同时列出多个事件。

尝试以下方法：

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

---

我使用Willian El Turk的解决方案如下：

// 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");
   }
});

这是一个很好的解决方案，除了因为它在从左向右移动时立即执行之外，即使是垂直滑动，它也非常敏感。最好在x轴上有一个最小的滑动距离。比如：

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

除了我不知道怎么。。。请随意编辑这个

编辑-您可以像这样检查距离（x轴），它适用于我：

$('.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");
        }
    }
}

---

这里已经回答了这个问题：

诀窍是：

… .bind('swipeone swiperight', … 

您必须将其绑定到两个事件。只有swiperight不起作用。我花了3个小时才弄明白：D

最好的，

---

Rico

将版本0.90.1第1326行上的箱子替换为该代码

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

if（_bHasTouches&&u bHasMoved==true&&u bhasswipeposition==true）{
_bIsSwipe=true；
_oDetails.type='swipe'；
_vLimit=$（窗口）.height（）/4；
_wLimit=$（窗口）.width（）/4；
_sMoveY=\u oDetails.delta[0]。lastY；
_sMoveX=_oDetails.delta[0].lastX；
_sMoveYCompare=_sMoveY.toString（）.replace（'-'，''）；
_sMoveXCompare=_sMoveX.toString（）.replace（'-'，''）；
如果（_sMoveX<0）{
if（_oDetails.delta[0].lastY<\u vLimit）{
如果（\u sMoveYCompare<\u vLimit）{
_oDetails.type+=“左”；
}
}
}如果（_sMoveX>0），则为else{
如果（\u sMoveYCompare<\u vLimit）{
_oDetails.type+=“右”
}
}否则{
_oDetails.type+=''；
}
如果（_sMoveY<0）{
如果（\u sMoveXCompare<\u wLimit）{
_oDetails.type+=“向上”
}
}否则如果（_sMoveY>0）{
如果（\u sMoveXCompare<\u wLimit）{
_oDetails.type+=“向下”
}
}否则{
_oDetails.type+=''；
}
//警报（_oDetails.type）；
_$element.triggerHandler（\u oDetails.type，\u oDetails）；
}

您是否在触控设备上进行测试？我也遇到了这个问题（我今天早上刚开始使用jGestures），但我在一台带有鼠标的PC上进行测试，并认为这是原因，因为我能够触发tapone事件。没关系，我已经在一个支持触摸的设备上试过了，但我无法让swiperight或swipeleft正常工作。但Tapone仍然有效。我一直在进行四重触摸活动。现在尝试双击。请看下面的分解：我正在这样做，每次刷卡都会有四次回叫触发：（.我想油门应该是一个答案

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