使用HammerJS和jQuery

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) 的错误：未捕获的类型错误：a.addEventListener不是一个函数。

我进行了一些研究，并找到了另一个stackoverflow问题，它说我不能通过Hammerjs传递jQuery，因此我应该使用jQuery Hammer。我查看了该存储库，它已经近两年没有更新了。

我需要使用jQuery Hammer (https://github.com/hammerjs/jquery.hammer.js) 扩展吗？还是可以不用它而直接通过jQuery传递。

- pourmesomecode

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
})

- jmcgriz

---

或者，如果您只期望一个 .container，您可以使用 document.querySelector('.container') 来获取它。 - ajm