Question

我正在使用Hammer.js来寻找水平平移手势，我设计了一个简单的功能，可以在向左或向右平移时单击按钮。它可以正常工作，除了垂直滚动在触摸设备上没有做任何事情，或者它真的很奇怪和奇怪。

这是功能：

var panelSliderPan = function() {
    // Pan options
    myOptions = {
        // possible option
    };

    var myElement = document.querySelector('.scroll__inner'),
        mc = new Hammer.Manager(myElement);
    mc.add(new Hammer.Pan(myOptions));

    // Pan control
    var panIt = function(e) {
        // I'm checking the direction here, my common sense says it shouldn't
        // affect the vertical gestures, but it blocks them somehow
        // 2 means it's left pan
        if (e.direction === 2) {
            $('.controls__btn--next').click();
        // 4 == right
        } else if (e.direction === 4) {
            $('.controls__btn--prev').click();
        }
    };

    // Call it
    mc.on("panstart", function(e) {
        panIt(e);
    });
};

我试图向识别器添加一个水平方向，但它没有真正的帮助（不确定我是否做到了这一点）：

mc = new Hammer.Manager(myElement, {
    recognizers: [
        [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

谢谢！

Answer 1

尝试将touch-action property设置为auto。

mc = new Hammer.Manager(myElement, {
    touchAction: 'auto',
    recognizers: [
        [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
    ]
});

来自hammer.js文档：

当你将touchAction设置为auto时，它不会阻止任何默认值，而Hammer可能会破坏。您必须手动调用preventDefault才能解决此问题。如果您知道自己在做什么，就应该使用它。

Answer 2

用户patforna是正确的。您需要调整touch-action属性。当你在移动设备上绑定一个大元素时，这将修复滚动不起作用。

您可以像这样创建一个Hammer实例

var h = new Hammer(options.contentEl, {
    touchAction : 'auto'
});

我正在开发一个pull to refresh功能，所以我需要pan事件。

添加识别器。

h.get( 'pan' ).set({
    direction   : Hammer.DIRECTION_VERTICAL,
});

h.on('panstart pandown panup panend', eventHandler);

在事件处理程序中，您可以查看已触发的事件，并在需要时手动调用event.preventDefault()。这适用于锤子2.0.6。

对于那些正在寻找刷新代码的人来说，取自 - https://github.com/apeatling/web-pull-to-refresh

Answer 3

我的问题是，垂直滚动滚动了应该在水平平移/滑动上显示/隐藏的侧边栏。在查看了事件的详细信息之后，我意识到Hammer可能基于X增量触发了panleft和panright事件，并且没有考虑Y增量，因此我的快速解决方案是在处理程序中检查水平方向：

this.$data.$hammer.on('panleft', (e) => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
        return;
    }

    this.isVisible = true;
});

Answer 4

Hammer 2.x不支持垂直滑动/平移。 Documentation说：

注意： 调用Hammer（）创建简单实例时，平移和滑动识别器配置为仅检测水平手势

但是，您可以使用支持垂直手势的older 1.1.x version

-

澄清：这是指一个'简单实例'，当您没有将任何识别器配置作为第二个参数传递时。换句话说，这些是默认值，但可以（通常应该）被覆盖。

Hammer.js在水平平移时打破垂直滚动

4 个答案: