Question

ready = ->
  onPan = (ev) ->
    console.log(ev)
    # ev.target.dataset.object

  createHammer = (v) ->
    mc = new Hammer.Manager(v, {})
    mc.add new Hammer.Pan(
      direction: Hammer.DIRECTION_HORIZONTAL
      threshold: 20
    )
    mc.on 'panleft', onPan
    mc.on 'panright', onPan

  selector = '.foo a'
  createHammer(v) for v in document.querySelectorAll(selector)

$(document).ready(ready)
$(document).on('page:load', ready)

我不知道我做错了什么，这里......对象都得到了一个处理程序，当我拖动时（请注意，我的鼠标放在我的计算机上）如果我停在元素上，它会点击。最后一次锤击事件的srcEvent.type是鼠标移动，所以它没有锤击事件。我试着打电话给ev.preventDefault()，但似乎没有任何效果。

我仍然希望能够点击...而不是在拖动之后。我错过了什么？

我尝试preventDefault: true作为经理的选项......

我在动作上尝试了ev.preventDefault()

Answer 1

我遇到了同样的问题，暂时（200ms）修复了目标元素上的点击处理问题。这是在panend事件中通过设置标志并启动计时器来删除该标志

来完成的

Answer 2

如本评论所述： https://github.com/hammerjs/hammer.js/issues/240#issuecomment-16583814

“这实际上不是Hammer的问题，而只是客户端事件的传播方式。Hammer并没有取代所有默认事件，而是对其进行了扩充，因此诸如Click之类的默认内容仍然会触发。”

您可以使用常规标记过滤此类点击。例如。在Angular 7中：

@HostListener('click', ['$event'])
onClickBtn(){
  if (!this.filterGhostClick) {
    this.regularClickHandler();
  }
  this.filterGhostClick = false;
}

@HostListener('pan', ['$event'])
onPanStart(e){
  this.panHandler(e);
}

private filterGhostClick = false;

panHandler(e: Event) {
  ...
  if (e.isFinal) {
    this.filterGhostClick = true;
  }
}
...

HammerJS点击Pan

2 个答案: