Question

我正试图解决这个问题：在像这样的块中使用

$(document).ready(function() { ... } )

初始化Hammer.js的函数，如下所示：

    var area = document.querySelector('#keyboard');
    var hammertime = new Hammer(area);

    hammertime.on("pan", { /* options */ }, function(eventu) {
        console.log("pan"); 
    }); 
    hammertime.on("tap", { /* options */ }, function(eventu) {
        console.log("tap!"); 
    });

刚刚调用时，会生成：

TypeError：element为null

并在hammer.js代码中链接到此函数：

- element.addEventListener(type, handler,
> false);

应该如何正确地打电话？我真的陷入困境，jQuery准备似乎不是正确的方式......我也尝试将代码移动到一个块内：

window.addEventListener('load', function() { 
//here thecode above
}, false);

但我得到同样的错误。

[编辑]在所有Hammer.js示例中，他们都使用DIVs元素，在这里我试图在li（st）上做这个，这应该与我的问题有关吗？

即：

<ul id="keyboard">
<li id="first">...</li>
<li id="second">...</li>
[...]
</ul>

然后：

var area = document.querySelector('#keyboard');

或（同样的问题）：

var area = document.querySelector('#first');

有什么想法吗？谢谢： - ）

Answer 1

var area = document.querySelector('#keyboard');

在原生JS中，您不需要分别将#或.添加到ID或类中。只是名字。

我认为如果删除＃，则会找到该元素。

Answer 2

我不知道你是否已经解决了，无论如何我今天遇到了同样的问题并发现了以下内容。看来，除了在Hammer.js网站上所说的，在使用默认语句创建一个新的Hammer实例时：

var hammertime = new Hammer(area)

它没有默认的输入事件识别器。因此，您可以尝试以这种方式添加所需的内容：

var hammertime = new Hammer.Manager(area, {
          recognizers: [
            [Hammer.Pan, {enable: true}],
            [Hammer.Tap, {enable: true}]
          ]
        });

这已经为我解决了。
您可以在Hammer.js网站上找到更多选项和详细信息，特别是：
http://hammerjs.github.io/api/#hammer.manager
http://hammerjs.github.io/recognizer-pan/
http://hammerjs.github.io/recognizer-tap/

Hammer.js TypeError：元素为null，在$（document）.ready中使用：

2 个答案: