多指触摸滑动事件

Question

多指触摸滑动事件

7

我有两个 $('body').swipe(); 函数，很明显它们不能一起运行，因为第二个会取消我想要做的事情(两个函数在同一个DOM元素上运行等)...

第一个函数可以正常工作。用两个手指左右滑动。我的问题是，这会禁用iPad上普通的单指页面滚动。

问题: 我想用两根手指运行左右滑动功能(可行)，但是我想在单指滑动时启用allowPageScroll: 'vertical'。我该如何完成这个任务？我无法想出一种方法在swipeLeft:和swipeRight:函数中运行选项(例如allowPageScroll: 'vertical'、threshold: 200、fingers: 2)。

使用的插件可以在这里找到：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
});

- Mike Barwick

1

http://quojs.tapquo.com/ - HIRA THAKUR

嗯，我不确定是否值得为了一个函数而使用一个全新的库。我也没有听说过这个。它在苹果的“批准”列表上吗？ - Mike Barwick

虽然我可能需要看看另一个解决方案。 - Mike Barwick

锤子时间！http://eightmedia.github.io/hammer.js/ 和 fingerns.length http://www.appliness.com/multitouch-with-hammer-js/ - john Smith

是的，我看了 Hammer。看起来这应该是我应该选择的方法。 - Mike Barwick

当我想在同一个DOM元素上应用多个不同手指数量的滑动手势时，事情变得更加困难。复杂... - Mike Barwick

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Preview · Accepted Answer

我想我做到了某些东西，但并没有使用你提供的TouchSwipe插件（在尝试多次后我放弃了并尝试其他东西）。

我使用了Touchy（1.98 kb），可以在这里找到，它提供了对多达5个手指的支持。检测向左或向右滑动的另一部分有点手动，将开始时两个手指的X坐标和结束时保存到变量中。

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

if (finger1Start < finger1End && finger2Start < finger2End)

我决定当两个手指在同一方向移动时才考虑真正的滑动，但如果您想更改，那么这取决于您。最后一件事，如果您真的想要“门槛”，您只需要使用new Date().getTime();保存事件的开始和结束时间，然后减去它们并验证它们是否大于200毫秒。如果您想，我可以更新代码。这是在iPhone 4s（iOS 7.0.3）上测试过的Fiddle。

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
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jairajs89/Touchy.js/master/touchy.js"></script>
<body>
    <div id="message"></div>
    <div id="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus.
    
    Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, commodo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, commodo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium.
    </div>
</body>