logo标签列表

无法使用 Hammer.js 库

javascripthtmlcss
3

我正在使用hammer.min.js库在Windows平台上用手势制作一个应用程序，使用的编辑器是sublimeText3。

我从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.";
});

使用hammer库，我想要获取信息"panleft手势被检测到。"、"panright手势被检测到。"、"tap手势被检测到。"或者"press手势被检测到。"。
3
你查看了浏览器的开发者工具吗？JS文件是否被找到或返回了404错误。 - Cray
3个回答
3

由于您在 gestos.js 中使用了 Hammer，因此需要确保先加载 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未定义”。

1

首先感谢您的回复。我按照您的提示尝试了一些其他方法后，终于成功了。我从https://github.com/hammerjs/hammer.js/tree/master/和https://hammerjs.github.io/下载了 Hammer 库，并逐个导入（一个接一个）以使用所有库函数，遵循 Joshua 的建议。但我不知道为什么，这些链接中的库似乎存在问题。然后，我尝试使用 Hammer Web 库中的代码<script src="https://hammerjs.github.io/dist/hammer.js"></script>，这就行了！对我来说可行。抱歉解释得有点长，但我希望这也能帮助到其他人。

0

我认为你需要等待 hammer.min.js 的加载完成。你正在尝试从 gestos.js 调用 new Hammer(panelGestos)，而似乎是在 hammer.min.js 完全加载之前运行。

请参考Joshua T的回答。你之前说在完全加载之前，但是脚本标签是同步加载的。hammer.min.js甚至在gestos.js完成加载之前都没有开始加载，这就是整个问题所在。 - Nate
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接