多指触摸滑动事件

Question

我$('body').swipe();下面有两个函数,它们显然无法一起运行,因为第二个函数取消了我想要做的事情(两个函数在同一个DOM元素上运行等)...

第一个功能正常工作.用两根手指左右滑动.我的问题是,这会禁用正常的一个手指页面滚动,可以在iPad上进行.

问题:我想用两个手指(工作)运行向左和向右滑动功能,但我想allowPageScroll: 'vertical'在1个手指滑动时启用.我怎么能做到这一点？我无法找到一种方法来运行选项(即allowPageScroll:'vertical',threshold:200,fingers:2)仅在swipeLeft:和swipeRight:函数内.

使用的插件可以在这里找到:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

$('body').swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {

        // set cookie
        $.cookie('sb-swipe', 'inactive', { expires: 1 });

        //This only fires when the user swipes left
        openDashboard();

        // hide swipe instructions, if applicable
        $('div.instructions-overlay').fadeOut('slow');
    },
    swipeRight: function (event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes right
        closeDashboard();

        $('#employee-dash-btn').hide();
    },
        allowPageScroll: 'vertical',
        threshold: 200,
        fingers: 2
});

$('body').swipe({
    allowPageScroll: 'vertical',
    fingers: 1
});

Answer 1

我认为我可以正常工作，但不能通过您链接的TouchSwipe插件进行操作（经过大量测试后，我只是放弃并尝试其他方法）。

我使用了Touchy（1.98 kb），可以在此处找到它，它最多支持5个手指。另一部分是通过保存两个手指的X坐标来检测向左或向右滑动的方法手指在触摸事件的开始和结束时变成变量。

我们只需要比较两个第一个坐标是大还是小。下面的代码向右滑动：

if (finger1Start < finger1End && finger2Start < finger2End)

当两个手指朝同一方向移动时，我决定考虑进行一次真正的滑动，但是要由您决定是否要改变。

最后一件事，如果您确实想要threshold，则只需保存事件的开始时间和结束时间并new Date().getTime();减去它们，并确认它们的长度>为200ms。如果您愿意，我可以更新代码。

这是Fiddle，我已经在iPhone 4s（iOS 7.0.3）上对其进行了测试。

if (finger1Start < finger1End && finger2Start < finger2End)

var finger1Start,
    finger1End,
    finger2Start,
    finger2End,
    threshold = 200;

$('body').touchy({
  two: function (hand, finger1, finger2) {
    
    hand.on('start', function (points) {
      finger1Start = points[0].x;
      finger2Start = points[1].x;
    });
    
    hand.on('end', function (points) {
      finger1End = points[0].x;
      finger2End = points[1].x;
      testSwipe();
    });
  }
});

function testSwipe () {
  if (finger1Start < finger1End && finger2Start < finger2End) 
    // The two X coordinates of the fingers have swipe to the right
    if (finger1End - finger1Start >= threshold &&
        finger2End - finger2Start >= threshold) {
      $('#message').text("You have swipe to the right");
    }
    else {
      $('#message').text("Not enought swipe");
    }
        
  }
  else if (finger1Start > finger1End && finger2Start > finger2End) {
    // The two X coordinates of the fingers have swipe to the left
    if (finger1Start - finger1End >= threshold &&
        finger2Start - finger2End >= threshold) {
      $('#message').text("You have swipe to the left");
    }
    else {
      $('#message').text("Not enought swipe");
    }
  }
}

#message {
  color:green;
}

#text {
  width: 100px
}