如何在 JavaScript 中使用 Hammer.js 插件？答案

【问题标题】：How to use Hammer.js plugin with JavaScript?如何在 JavaScript 中使用 Hammer.js 插件？
【发布时间】：2019-11-28 01:15:29
【问题描述】：

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

<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 错误。我到处寻找，但找不到任何解决方案，所以我不知道我做错了什么。

我正在使用最新的 Google Chrome 浏览器。

【问题讨论】：

【解决方案1】：

我使用.each 函数和jQuery 使它工作。解决方案：

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

【讨论】：

【解决方案2】：

document.getElementByClassName 不正确，但假设您的意思是 document.getElementsByClassName，（注意复数“元素”）那么问题是它返回一个数组，即使该类只有一个元素。

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

【讨论】：