具有純JavaScript的Hammer.js

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元素都是一個實例。 （IMHO）如果您不介意使用此插件或不使用Vanilla，則JQuery的速度會降低幾毫秒。

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