jquery - 将hammer.js限制为水平滑动

Question

我正在使用 Hammer.js，它似乎工作得很好，并且确实提到我可以限制水平和垂直方向，但我似乎无法让它禁用垂直滑动。基本上我有一个画布外导航，我只想使用水平滑动来显示。

(function ($) {
    var $sw = $('#left-content');

    $sw.on('swipe', function (event) {
        event.preventDefault();
        $('#ns-tool-bar, #left-content').toggleClass('slide');
    });
}(jQuery));

Answer 1

您可以使用 event.direction

就像是

if(event.direction == 'right' || event.direction == 'left'){
    //do your stuff
}

应该管用

Answer 2

我认为雪莉的回答已经过时了。我相信当前的 API 使用 event.gesture.direction。

Answer 3

您也可以只注册swipeleft和swiperight活动。请参阅源代码。

Answer 4

绑定仅 swipeRight 或 swipeLeft 适用于 iOS 和（我相信）Android，但不适用于 IE。

Answer 5

silent_shelly 的回答是正确的，尽管您也可以锁定拖动方向：

drag_block_horizontal: false
drag_block_vertical: false

纪录片可以在“手势选项”部分下找到

Answer 6

我结合了所有答案并添加了 event.gesture.preventDefault() 作为一个工作示例：

$sw.hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
    event.gesture.preventDefault();
    if (event.gesture.direction == Hammer.DIRECTION_LEFT || event.gesture.direction == Hammer.DIRECTION_RIGHT)
        if(event.type == "swipe"){
            swipeAction(event);
        } else {
            dragAction(event);
        }
    }
});

我还捕获了事件类型，因此您可以添加功能，例如在滑动时跳转整个容器宽度，但当然您可以忽略它。