使用 TouchSwipe 对元素进行多次滑动事件答案

【问题标题】：Multiple swipe events on an element with TouchSwipe使用 TouchSwipe 对元素进行多次滑动事件
【发布时间】：2016-04-28 00:25:14
【问题描述】：

我想用TouchSwipe 绑定一个DOM 元素上的多个滑动事件。 demo 没有包含多个事件的示例。我尝试了以下方法：

$("#test").swipe( {

    //Generic swipe handler for all directions
    swipeRight:function(event, direction, distance, duration, fingerCount) {
        alert("you swiped " + direction);
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold:10
});

$("#test").swipe( {

    //Generic swipe handler for all directions
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
        alert("you swiped " + direction);
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold:10
});

http://jsfiddle.net/xktJ9/

但不幸的是，只有第一个事件会触发（参见小提琴）。

这可以通过 TouchSwipe 库实现吗？如果是，如何？如果没有，你能推荐一个能够在一个元素上绑定多个事件的库吗？

【问题讨论】：

而不是添加事件...您可以使用direction参数检查direction
是的，我现在就是这样做的。但不幸的是，这些事件必须动态添加/删除。我可以编写自己的机制来注册/取消注册事件，但我宁愿让图书馆来处理。

标签： javascript jquery touch

【解决方案1】：

您可以使用 touchSwipe 的 swipeStatus 方法来代替 swipeRight 或 swipeLeft。

    $("#test").swipe( {
     swipeStatus:function(event, phase, direction, distance, duration, fingers)
     {
       //Here we can check the:
       //phase : 'start', 'move', 'end', 'cancel'
       //direction : 'left', 'right', 'up', 'down' 
       //distance : Distance finger is from initial touch point in px
       //duration : Length of swipe in MS 
       //fingerCount : the number of fingers used
       if (phase=="end" && (direction == 'left' || direction == 'right')) {
         alert("you swiped " + direction);
       }
     },
     //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:10,
     maxTimeThreshold:5000,
     fingers:'all'
   });

更多详情请看：link

【讨论】：

@leo，有什么解释吗？

【解决方案2】：

这是我如何添加多个滑动事件的示例。

$("#demo1").swipe( {
    //Single swipe handler for left swipes
    swipeRight:function() {
            demo1.goToPrevSlide();
                return false;
    }
    ,

    swipeLeft:function() {
            demo1.goToNextSlide();
                return false;
    },excludedElements:"",
    allowPageScroll:"vertical",
    preventDefaultEvents:false
    })

【讨论】：