Question

有没有办法使用Hammer.js在HTML元素上设置pinch事件，只允许在水平轴上进行夹点事件？我希望垂直轴用于标准页面滚动。

当我设置水平平移时，垂直页面滚动有效。当我设置水平平移和捏合时，垂直页面滚动停止工作。即使一根手指滚动停止工作。

        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');

Hammer.js 2.0水平仅捏

3 个答案: