Question

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

我从https://hammerjs.github.io/下载了Hammer.min.js，并将其放在我的项目文件夹中并调用了它，但是没有任何反应。我尝试在HTML5上使用<script type="text/javascript" src="libraries/hammer.min.js"></script>导入Hammer库。还尝试使用“ 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的加载完成。您正在尝试从new Hammer(panelGestos)调用gestos.js，而hammer.min.js似乎在ToggleButton完全加载之前正在运行。

Answer 3

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

无法使用库Hammer.js

3 个答案: