Question

下面我抓住容器，然后向左和向右滑动我触发一个点击，这是另一个做一些奇特的动画爵士乐的功能。

var element = document.getElementsByClassName('container');
var hammertime = new Hammer(element);
hammertime.on('swiperight', function(ev) {
  $('.btn-left').trigger('click');
});
hammertime.on('swipeleft', function(ev) {
  $('.btn-right').trigger('click');
});

我一直收到有关Hammerjs图书馆的错误（http://hammerjs.github.io/dist/hammer.min.js）Uncaught TypeError: a.addEventListener is not a function。

我做了一些研究，发现另一个stackoverflow问题，说我不能通过Hammerjs传递jQuery，因此我应该使用jQuery Hammer。我看了一下回购，但近两年没有更新。

我是否需要使用jQuery Hammer（https://github.com/hammerjs/jquery.hammer.js）扩展，或者我可以在不需要的情况下传递jQuery。

Answer 1

问题在于new Hammer()期待单个元素，而getElementsByClassName正在返回NodeList。

如果您将其更改为

var hammertime = new Hammer(element[0])

应该按预期工作，因为您将传递匹配.container的第一个元素。如果要将其绑定到具有.container类的所有元素，则需要自行循环它们。我很少使用jQuery，所以我通常包含这个小帮助函数来循环NodeLists

function doToAll(elems, fn){
  var len = elems.length
  while(--len > -1){
    fn(elems[len])
  }
}

在这种情况下，您可以像这样使用它：

doToAll(document.getElementsByClassName('container'), function(element){
  var hammertime = new Hammer(element)
  //add in the rest of your functionality
})

使用HammerJS和jQuery

1 个答案: