代码之家 › 专栏 › 技术社区 › Hogan

Hammer.js 2.0水平仅捏

hammer.js javascript

2

Hogan · 技术社区 · 12 年前

有没有一种方法可以使用Hammer.js在HTML元素上设置pinch事件,从而只允许在水平轴上发生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/

3 回复 | 直到 12 年前

1

2

Hogan 12 年前

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

文件: http://hammerjs.github.io/touch-action/

修改测试: http://jsfiddle.net/ph1mpzm1/1/

2

1

dadThrowsBolts 12 年前

您可能可以在不阻塞垂直滚动的情况下使用pinch。我不确定,但以下方法可能奏效。试试看。关键是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*/});

3

0

mustafa kemal tuna 6 年前

我们可以使用hammer事件deltaX和deltaY财产来解决这个问题。

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