多指触摸轻扫事件

Multi-finger touch swipe event

本文关键字：事件 触摸      更新时间：2023-09-26

我在下面有两个$('body').swipe();函数，它们显然不能一起使用，因为第二个函数抵消了我想做的事情（两个函数在同一个 DOM 元素上运行，等等）...

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

问：我想用两根手指运行左右滑动功能（有效），但是我想在一根手指滑动上启用allowPageScroll: 'vertical'。我怎样才能做到这一点？我想不出一种方法来运行选项（即允许PageScroll："垂直"，阈值：200，手指：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
});

我想我得到了一些工作，但不是你链接的 TouchSwipe 插件（经过大量测试后，我只是放弃并尝试另一件事）。

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

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

if (finger1Start < finger1End && finger2Start < finger2End)

当两根手指朝同一方向移动时，我决定考虑真正的滑动，但如果你想改变，这取决于你。

最后一件事，如果你真的想要 threshold ，您只需保存事件的开始和结束时间，new Date().getTime();减去它们并验证它们是否> 200 毫秒。如果您愿意，我可以更新代码。

这是小提琴，我已经在iPhone 4s（iOS 7.0.3）上测试过它。

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>

相关文章：