Question

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

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之外什么都不用。

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模式，因此它可以同时使用实例进行多个数据处理，因此每个绑定锤子的JQuery元素都是一个实例。（恕我直言）如果你不介意使用这个插件或者留在Vanilla中，JQuery会减慢几毫秒。

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

Hammer.js用普通的javascript

4 个答案: