Hammer.js 2.0水平只夹点

Question

是否有一种方法可以使用Hammer.js在HTML元素上设置夹点事件，以便只允许水平轴上的夹点事件？我希望垂直轴被用于标准的页面滚动。

当我设置水平平底锅时，垂直的页面滚动工作。当我设置水平平底盘和夹紧时，垂直页面滚动停止工作。连一个手指滚动都停止工作了。

        var hammerEl = Hammer(element);
        var pan = new Hammer.Pan({
            direction: Hammer.DIRECTION_HORIZONTAL
        });
        var pinch = new Hammer.Pinch({
        });
        hammerEl.add(pan);
        hammerEl.add(pinch);

http://jsfiddle.net/ph1mpzm1/

Answer 1

我想通了。我在Hammer经理中添加了touchAction: "pan-y"。

博士：http://hammerjs.github.io/touch-action/

改良试验：http://jsfiddle.net/ph1mpzm1/1/

Answer 2

你可以在不阻塞垂直卷轴的情况下工作。我不确定，但下面的可能有用。试试看。关键是requireFailure位。如果它看到你正在做一个垂直的平底锅手势，它就不会注册一个夹点事件。

    var hammerEl = Hammer(element);
    var panH = new Hammer.Pan({
        event: "panH",
        direction: Hammer.DIRECTION_HORIZONTAL
    });
    var panV = new Hammer.Pan({
        event: "panV",
        direction: Hammer.DIRECTION_VERTICAL
    });
    var pinch = new Hammer.Pinch({
        enable: true
    });
    hammerEl.add([panH, panV, pinch]);
    pinch.requireFailure(panV);

    hammerEl.on("panH", function(){/*do horizontal pan things*/});
    hammerEl.on("pinch", function(){/*do pinch things*/});

Answer 3

我们可以使用锤子事件deltaX和deltaY属性来解决这个问题。

  const dx = Math.abs(event.deltaX);
    const dy = Math.abs(eevent.deltaY);
    console.log(dx > dy ? 'horizontal' : 'vertical');