将hammer.js限制为水平滑动答案

【问题标题】：Limit hammer.js to horizontal swipes将hammer.js限制为水平滑动
【发布时间】：2013-01-16 21:07:08
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery hammer.js

【解决方案1】：

你可以使用 event.direction

类似

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

应该有效

【讨论】：

答案被贬低了。您现在应该使用 event.gesture.preventDefault() （有关详细答案，请参阅下面的答案）

【解决方案2】：

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

【讨论】：

正确，目前docs 说： > 以下属性在event.gesture 中可用。 > direction {String} 我们正在移动的方向。匹配Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT

【解决方案3】：

您也可以只注册swipeleft 和swiperight 活动。请参阅source code。

【讨论】：

【解决方案4】：

绑定只是 swipeRight 或 swipeLeft 对 iOS 和（我相信）Android 很好，但在 IE 上不行。

【讨论】：

【解决方案5】：

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

drag_block_horizontal: false
drag_block_vertical: false

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

【讨论】：

【解决方案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);
        }
    }
});

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

【讨论】：