javascript 只有 swipeone 使用 jGestures
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9413435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Only swipeone is working with jGestures
提问by Jasard
I'm trying to implement touch evens with jGestures. swipeone works fine but anything else (swipeleft, swiperight etc) is not firing.
我正在尝试使用 jGestures 实现触摸事件。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>
This is just a test page I did. It was actually working at one point in my main project but seemed to have stopped for no reason at all, not even when I reverted to an older version. I've tried a different version of jGestures with no luck.
这只是我做的一个测试页。它实际上在我的主要项目中曾经运行过，但似乎无缘无故地停止了，即使我恢复到旧版本时也没有。我尝试了不同版本的 jGestures，但没有成功。
回答by Who
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).
SwipeLeft、SwipeRight、-Up 和 -Down 的实现有点糟糕。只有当您完全停留在开始触摸事件的轴上时才会触发它们。例如，只有当您的手指从 (X,Y) (120, 0) 移动到 (250, 0) 时，SwipeRight 才会起作用。
If the Y-Coordinates from Start- and Endpoint differ, it's not gonna work.
如果起点和终点的 Y 坐标不同，则不会起作用。
jGestures.js (ca. line 1095) should better look something like this (readable):
jGestures.js（大约第 1095 行）最好看起来像这样（可读）：
/**
* 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);
}
回答by Rico Neitzel
This is already answered here:
这已经在这里回答：
stackoverflow about jGesture swipe events
关于 jGesture 滑动事件的 stackoverflow
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
您必须将其绑定到两个事件。只有 swiperight 不起作用。我花了 3 小时才弄明白：D
Best, Rico
最好的，里科
回答by ceed
replace the cases on line 1326 in version 0.90.1 with this code
用此代码替换版本 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);
}
回答by William El-Turk
try this:
试试这个：
$('#wrap').bind('swipeone', function (event, obj) {
var direction=obj.description.split(":")[2]
if(direction=="left"){
doSomething();
}
});
回答by colin
I'm using Willian El-Turk's solution like this:
我正在使用 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");
}
});
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:
优秀的解决方案，除了因为它会在从左到右移动时立即执行，即使垂直滑动更多，它也非常敏感。在 x 轴上设置最小滑动距离会很棒。就像是：
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 :
编辑 - 您可以像这样检查距离（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");
}
}
}
回答by Arnau March
You could try both:
你可以同时尝试：
$('#wrap').bind('swipeleftup', function(){
doSomething();
});
$('#wrap').bind('swipeleftdown', function(){
doSomething();
});
And forget about 'swipeleft' as is quite difficult to trigger, as mentioned before.
忘记'swipeleft'，因为它很难触发，如前所述。
回答by circlecube
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:
以及 right 的等价物：
$("#wrap").on('swiperight swiperightup swiperightdown', function(e){
doSomething();
});
You can list multiple events together with the on method.
您可以使用 on 方法列出多个事件。
