Hammer.js with plain javascript

Question

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

Answer 1

只需快速浏览一下GitHub的文档在：

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

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

Answer 2

绑定锤容器元素：

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 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的插件 - 它是针对JQuery的。所以，如果你使用JQuery为您的网站用于其他用途，然后它的方便，你可以基本上是从锤“应用”插件在jQuery选择这样的：

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

由于hammer.js具有它可以在现代的OOP模式一次使用多个数据处理实例，因此绑定到锤子的每个JQuery元素都是一个实例。 （恕我直言）JQuery减慢了一些毫秒，如果你不介意使用这个插件或保持与香草。

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