检测Hammer.js事件中的方向变化

Question

我正在使用 hammer.js 拖动一个元素，我想知道如何区分它的方向。

通常情况下我是这样使用的：

evt.gesture.deltaX>0 //right
evt.gesture.deltaX<0 //left

但是deltaX是指拖动开始时的位置，因此当我在拖动过程中改变方向时，我并不知道它。

有没有办法立即获取方向更改？

- Bruse

---

想知道这个答案是否有帮助... - T J

Answer 1

您可以通过将上一次事件和当前事件的中心值传递给Hammer.utils.getDirection()实用程序方法来确定拖动的正确方向，如下所示：

var el = document.getElementById('sandbox');
var output = document.getElementById('output');
var lastCenter;

function onDrag(ev){
    var center = ev.gesture.center;
    if (lastCenter)
        /* use the built in direction determination of hammer
       but use the last position instead of the starting position */
        output.innerHTML = Hammer.utils.getDirection(lastCenter, center);
    lastCenter = center;
}

function onRelease(){
    lastCenter = null;
}

var hammertime = Hammer(el);
hammertime.on("drag", onDrag);
hammertime.on("release", onRelease);

#sandbox
{
    width: 100%;
    height: 150px;
    line-height:150px;
    text-align:center;
    color:#fff;
    background-color: #29A3CC;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<div id="sandbox">Drag the mouse here</div> 
<div id="output"></div>

_{注意：这不适用于最新的2.x版本}

（注：该句为提示，无需翻译）

- T J

Answer 2

由于这个问题已经存在7年之久，但仍未得到解答，现在（hammer 2.0.8）每个方向都有不同的事件可以监听。例如：

  private hammerManager: HammerManager | null = null;

  private onRefSet(node: HTMLDivElement | null) {
    if (!node || this.hammerManager) { return; }
    this.hammerManager = new Hammer(node);
    this.hammerManager.get('swipe').set({
      direction: Hammer.DIRECTION_ALL,
    });
    this.hammerManager.on('swipeleft', e => {
      console.log(e);
    });
    this.hammerManager.on('swiperight', e => {
      console.log(e);
    });
  }

文档中有更多信息 https://hammerjs.github.io/recognizer-swipe/

(我编写的示例使用"@types/hammerjs": "^2.0.40")

- Erwol

Answer 3

你可以使用

evt.gesture.direction

可能的值为left/right/up/down 在这里查看演示：http://eightmedia.github.io/hammer.js/examples/events.html

- Tamura

---

方向有同样的问题，即使我开始向左拖动，也会展示向右的情况。 还有其他的想法吗？ - Bruse

你是否使用触摸事件？如果是的话，我们无法知道方向。只有在拖动事件之后，我们才能知道方向。最好只监听拖动向左和拖动向右的事件。var hammertime = Hammer(element).on("dragleft dragright", function(event) { alert('你好！'); }); - Tamura

对我没用。我有同样的问题。只有当我传递原始点时，事件才会改变。还有其他想法吗？ - Bruse

你能否发布一些屏幕截图或插图来说明你想做什么？这可能有助于我们给出更好的答案。 - Tamura

想象一下拖动的球，当它改变方向时，只想抓住它。最终，我使用了一个额外的变量来保存旧的 X 值，然后计算出 deltaX。 - Bruse