Hammer.js 与纯 javascript答案

【问题标题】：Hammer.js with plain javascriptHammer.js 与纯 javascript
【发布时间】：2013-02-04 15:26:52
【问题描述】：

如何在没有 JQuery 选择器的情况下仅使用普通的 Javascript 方法来使用锤子 JS 事件？

【问题讨论】：

【解决方案1】：

将锤子绑定到容器元素：

var hammer = new Hammer(document.getElementById("container"));

现在，在容器元素上执行的每个手势上，您将收到一个包含手势信息的回调对象。

一些示例函数：

hammer.ondragstart = function(ev) { };
hammer.ondrag = function(ev) { };
hammer.ondragend = function(ev) { };
hammer.onswipe = function(ev) { };

hammer.js 可以作为完全独立的版本使用，因此您不需要导入 jquery 资源。见：http://eightmedia.github.com/hammer.js/

完整文档：https://github.com/eightmedia/hammer.js#documentation

【讨论】：

我有两个 image 容器。如果可能的话可以装载容器。

【解决方案2】：

快速浏览一下 GitHub 文档：

var hammer = new Hammer(document.getElementById("container"));

在没有 jQuery 的情况下创建一个“锤子”。之后你可以设置回调函数，你也不需要任何 jQuery。但要小心！ HammerJS 内部可能需要 jQuery，因此您可能不能省略 <script src="path/to/jquery.js"></script>

【讨论】：

你确定吗？我试图避免使用 JQuery
我不确定 HammerJS 内部是否需要 jQuery，但这有什么关系呢？如果你不想在你的代码中使用它，你不需要，你也可以使用 vanilla JS 选择器来创建一个 Hammer。但是，如果您想测试它，请尝试不导入 jQuery，而您正在导入 HammerJS。如果它中断并且控制台显示$ is undefined 或jQuery is undefined 之类的内容，您就知道 HammerJS 需要 jQuery。 @雅各布

【解决方案3】：

简短的回答是：只需使用普通的旧 DOM API。包含 jQuery 后，您没有义务或强制只使用 jQuery。

var someElements = document.querySelectorAll('.someClass');//not jQuery, perfectly valid
var byId = document.getElementById('someId');
var sameScript = $('#anotherId');//nothing stops me from doing this... using jQ for some things

如果您发现 DOM API 有点笨拙（确实如此），您不妨这样做：

var pureDOMRef = $('someID')[0];//returns "normal" Element object, removes jQ wrapper
var multiple = Array.prototype.slice.apply($('.classSelector'),[0]);//returns Array

随便玩玩，如果你想来回切换，没有错

【讨论】：

【解决方案4】：

新版本的hammer.js 提供了一个JQuery 插件，首先要明白它不是来自JQuery 的插件——它是FOR JQuery。因此，如果您将 JQuery 用于您的网站以用于其他目的，那么您基本上可以在 JQuery 选择器上从锤子中“应用”插件，如下所示：

$(element).hammer(options).bind("pan", myPanHandler);

由于hammer.js 具有现代OOP 模式，它可以使用实例同时处理多个数据，因此绑定到hammer 的每个JQuery 元素都是一个实例。（恕我直言）如果您不介意使用此插件或继续使用 Vanilla，JQuery 会减慢几毫秒。

http://hammerjs.github.io/jquery-plugin/

【讨论】：