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/