javascript - 将 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) Uncaught TypeError: a.addEventListener is not a function。

我做了一些研究，发现了另一个 stackoverflow 问题，它说我不能通过 Hammerjs 传递 jQuery，因此我应该使用 jQuery Hammer。我看了一下repo，已经快两年没更新了。

我是否需要使用 jQuery Hammer ( https://github.com/hammerjs/jquery.hammer.js ) 扩展，或者我可以在不需要它的情况下通过 jQuery。

Answer 1

问题是 new Hammer() 需要一个元素，而 getElementsByClassName 返回一个 NodeList。

如果你把它改成

var hammertime = new Hammer(element[0])

这应该按预期工作，因为您将传递匹配 .container 的第一个元素。如果你想将它绑定(bind)到所有具有 .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
})