javascript - Hammer.js 与纯 javascript

Question

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

Answer 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

Answer 2

快速浏览一下 GitHub 文档：

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

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

Answer 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

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

Answer 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/