如何将 Hammer.js 插件与 JavaScript 一起使用?

Question

我正在使用带有JavaScript的hammer.js插件库，但它向我抛出错误，该错误target.addEventListener is not a function在hammer.js文件中。我试图在网上查找，但找不到任何适合我的东西。这是我的代码： 我的模板文件：

<div class="class_name">
<img src="" class="img_test" />
</div>

JavaScript 文件：

var ele = document.getElementByClassName('img_test')
var hammer = new Hammer(ele)
hammer.on('tap', function(){
console.log('image tapped')
})

出于某些原因，我没有使用此插件的 CDN 版本，而是在本地计算机上创建了不同的文件，并从 GitHub 复制了 hammer.js 文件的代码。

当我运行上面的代码时，它给了我addEventListener错误。我到处找过，但找不到任何解决方案，所以我不知道我做错了什么。

我正在使用最新的谷歌浏览器。

Answer 1

我使用.each函数和jQuery使它工作。 溶液：

$('element').each(function(){
var mc = new Hammer(this)
mc.on('tap press', function(e) {
console.log('type: ', e.type)
})
})

Answer 2

好吧document.getElementByClassName是不正确的，但假设你的意思是document.getElementsByClassName，(注意复数的"元素"(，那么问题是它返回一个数组，即使只有一个元素具有该类。

所以var hammer = new Hammer(ele[0])应该解决这个问题。 如果你确实有多个元素与该类，那么你将不得不像使用jQuery一样循环遍历它们。