6

我正在尝试在水平滚动列表中使用 Hammer.js（jQuery 版本）禁用 iOS 中的垂直滚动。我试过这个：

$(document).hammer().on('swipe,drag', 'body',
    function(event)
    {
        if (event.direction == Hammer.DIRECTION_UP || event.direction == Hammer.DIRECTION_DOWN) 
        {
            event.preventDefault();
        }
    }
);

但它不起作用。那么，如何在仍然能够水平滚动的同时禁用垂直滚动？

4

4 回答 4

11

我使用 event.gesture.preventDefault 做到了：

$('#horizontalCarousel').hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
        event.gesture.preventDefault();
        if(event.type == "swipe"){
            swipeAction(event);
        } else {
            dragAction(event);
        }
 });

这是给定的文档

[编辑]

我的回答只是让您知道您使用了错误的 event.preventDefault()。实际上，您还使用了错误的语法来检查事件方向。您应该能够以这种方式管理它，尽管我还没有测试过：

$(document).hammer({ drag_lock_to_axis: true }).on("swipe drag", function(event) {
            if (event.gesture.direction == Hammer.DIRECTION_UP || event.gesture.direction == Hammer.DIRECTION_DOWN){
                 event.gesture.preventDefault();
            }
     });

改变了 2 件事：event.gesture.direction 和 event.gesture.preventDefault()；event.direction 是在旧版本的锤子 js 上执行此操作的方式。

注意：如果你想对滑动事件做一些事情，例如：滑动时水平跳跃更大的量，你可以结合我的答案。

于 2013-10-17T09:56:11.153 回答
1

看看这个页面：

https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults#evgesturestoppropagation

假设您$是 jQuery 并且您使用的是 jQuery 版本的hammer.js，请尝试此操作

 $('body').hammer().on('touch', function(ev){
      var $t = $(ev.target); //let's you know the exact element you touched.
      if(ev.gesture.direction === 'left' || ev.gesture.direction ==='right'){

      } else {
           ev.gesture.preventDefault();
      }
 });
于 2013-06-04T18:51:11.303 回答
1

您可以使用 drag_block_vertical 选项禁用垂直滚动：

$(document).hammer({drag_block_vertical: true}).on('swipe,drag', 'body', function(event){
    // etc
});

此外，您在应该始终存在的 body 元素上调用它。因此，您可能可以简化为：

$('body').hammer({drag_block_vertical: true}).on('swipe,drag', function(event){
    // etc
});
于 2013-08-12T16:44:17.377 回答
-2

Hammer(document.body, { prevent_defaults: true });

于 2013-03-23T12:12:35.413 回答