javascript – 将HammerJS与jQuery一起使用

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

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)未捕获的TypeError：a.addEventListener不是函数.

我做了一些研究,发现另一个stackoverflow问题,说我无法通过Hammerjs传递jQuery,因此我应该使用jQuery Hammer.我看了一下回购,并且近两年没有更新.

我是否需要使用jQuery Hammer(https://github.com/hammerjs/jquery.hammer.js)扩展,或者我可以通过jQuery而不需要它.

解决方法:

问题是新的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
})

标签：jquery,javascript,hammer-js
来源： https://codeday.me/bug/20190608/1201180.html