无法使用库Hammer.js

Question

我正在使用sublimeText3在Windows上使用Hammer.min.js库执行带有手势的应用程序。

我从https://hammerjs.github.io/下载了Hammer.min.js，并将其放在我的项目文件夹中并进行了调用，但没有任何反应。 我尝试在HTML5上使用<script type="text/javascript" src="libraries/hammer.min.js"></script>导入锤子库。 还尝试使用“ npm install --save Hammerjs”安装Hammer库，但似乎无济于事。

"HTML file: index.html"

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
    <title>Prueba de Apps Web</title>
    <link rel="stylesheet" type="text/css" href="screen.css" />
</head>
<body>
    <div id="panelGestos"></div>
    <hl id ='info'> gesto ! </hl>

    <script type="text/javascript" src="gestos.js"></script>
    <script type="text/javascript" src="libraries/hammer.min.js"></script>
</body>
</html>

"CSS file: screen.css"

body{
    background: lightblue;
}
#panelGestos {
  background: darkgreen;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}

#info{
    color: black;
    font-size: 2em;
    margin-top: 10px;
    text-transform: uppercase;
}

"JS file: gestos.js"

var panelGestos = document.getElementById('panelGestos');

// create a simple instance
// by default, it only adds horizontal recognizers
var hammertime = new Hammer(panelGestos);

// listen to events...
hammertime.on('tap doubletap pan swipe press pinch rotate', function (ev) {
    document.querySelector('#info').innerHTML = ev.type + '!';

hammertime.on("panleft panright tap press", function (ev) {
    panelGestos.textContent = ev.type +" gesture detected.";
});

使用锤子库，我想获取消息“检测到panleft手势”，“检测到panright手势”，“检测到轻击手势”。 或“检测到按下手势”。

Answer 1

由于您使用Hammer内gestos.js ，你需要确保hammer.min.js以前第一次加载gestos.js 。 交换脚本文件的顺序：

你有

<script type="text/javascript" src="gestos.js"></script>
<script type="text/javascript" src="libraries/hammer.min.js"></script>

什么时候应该是：

<script type="text/javascript" src="libraries/hammer.min.js"></script>
<script type="text/javascript" src="gestos.js"></script>

或者，您可以将gestos.js中的代码包装到窗口加载事件的回调中。

顺便说一句，当您遇到问题时，您应该真正检查控制台，因为它可能会说出一些信息，例如“未定义Hammer”。

Answer 2

我认为您必须等到hammer.min.js的加载完成。 您正在尝试从gestos.js调用new Hammer(panelGestos) ，它似乎在hammer.min.js完全加载之前正在运行。

Answer 3

首先，感谢您的回复。 我按照您的提示进行操作，在尝试了其他方法之后对我有用。 首先，我从https://github.com/hammerjs/hammer.js/tree/master/和https://hammerjs.github.io/下载锤子库，并导入它们（一次一个）以使用所有库函数跟随约书亚的小费。 我不知道为什么，但是这些链接似乎是图书馆的问题。 然后，我使用Hammer Web库尝试了<script src="https://hammerjs.github.io/dist/hammer.js"></script> 。 它对我有用。 抱歉，请提供大量解释，但我希望对您也有帮助。