Fatal编程技术网
  • javascript/
  • Javascript Can'；不要使用库Hammer.js

Javascript Can'；不要使用库Hammer.js

javascript html css

Javascript Can'；不要使用库Hammer.js,javascript,html,css,Javascript,Html,Css,我正在Windows上使用SublimiteText3使用hammer.min.js库执行一个带有手势的应用程序 我从中下载了hammer.min.js，将其放在我的项目文件夹中并调用它，但什么也没发生。我尝试在HTML5上使用导入hammer库。还尝试使用“npm安装--保存hammerjs”安装hammer库，但似乎没有任何效果 "HTML file: index.html" <!DOCTYPE html> <!DOCTYPE html> <html>

我正在Windows上使用SublimiteText3使用hammer.min.js库执行一个带有手势的应用程序

我从中下载了hammer.min.js，将其放在我的项目文件夹中并调用它，但什么也没发生。我尝试在HTML5上使用
导入hammer库。还尝试使用“npm安装--保存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>
使用hammer library，我想获得消息“检测到panleft手势”，“检测到panright手势”，“检测到点击手势”或“检测到按下手势”。

因为您在
gestos.js
中使用
hammer
，所以需要确保
hammer.min.js
在
gestos.js
之前先加载了。交换脚本文件的顺序：

你有
何时应该：
或者，您可以将代码包装在
gestos.js
中，并回调窗口加载事件

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

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

首先感谢您的回复。我遵循你的建议，在尝试了其他东西之后，它对我起了作用。首先，我从
https://github.com/hammerjs/hammer.js/tree/master/
和来自
https://hammerjs.github.io/
并导入它们（一次一个）以使用Joshua提示下的所有库函数。我不知道为什么，但从这些链接来看，这似乎是图书馆的问题。然后，我尝试使用hammer web库
，结果一切顺利！这对我很管用。很抱歉解释得太多，但我希望它也能对任何人有所帮助。

您检查过浏览器的devtools吗？找到JS文件或返回404错误。请参阅Joshua T的答案。你说在它完全加载之前，但是脚本标签是同步加载的。hammer.min.js甚至在gestos.js完成加载之前都不会开始加载，这就是整个问题所在。 
"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.";
});