Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Hammer.js - A library for multi-touch gestures

by BlackBerry Development Advisor on ‎12-20-2012 02:24 PM (5,822 Views)

With the launch of BlackBerry 10 right around the corner and all touch devices ready to rock and roll, you may be interested in adding gestures into your WebWorks app.


I came across an amazing JavaScript library called Hammer.js which makes it super easy to incorporate gestures into your app in only a few lines of code.  The library is extemely lightweight, running ~2kb when minified, and handles all the hard work around gestures for you.


Hammer.js supports quite a few gestures for your app such as: Tap, Double Tap, Hold, Swipe, Drag, and Transform (pinch-to-zoom). There are also several default properties you can configure (if you wish to customize the library even further). Lastly, it returns some very useful events to work with like momentum, distance, and scale to name a few.


So, why would you want use Hammer.js in your project?




Sure, there are other libraries out there that handle gestures but, it's important to think about resources when creating mobile apps. Hammer.js runs about 2kb (minified) and leaves a very tiny fingerprint.


Simple to use


The syntax is incredibly easy to both use, and understand.  There's even a jQuery plugin available if you're like me and like to take short-cuts in your code Smiley Happy


Here's a plain JavaScript example


// tell hammer.js which element to watch
var hammer = new Hammer(document.getElementById("myElementID"));

// do something when the element is double-tapped
hammer.ondoubletap = function (event) {
    alert('You double-tapped me!');


The same example with jQuery


.bind("doubletap", function(event) { alert('You double-tapped me!');


Plays nice with others


Hammer.js works well with other libraries and frameworks.  Whether you're using jQuery, bbUI.js, Backbone.js, or others, you should have no worries that Hammer.js will interfere.  It performs very well, and doesn't get in the way.




With each gesture, Hammer.js returns events which makes it super easy to integrate gestures into your app.  To name a couple, if you're swiping, or dragging an element, Hammer will return a momentum value.  Want to add pinch-to-zoom capibilities? A scale property which tells you how far the users fingers are moving, and in which direction is returned.


Open Source


Hammer.js is Open Source, and licensed under the MIT License.  


It's Hammer Time!


To get started, visit EightMedia's GitHub repository today @ https://github.com/EightMedia/hammer.js






Users Online
Currently online: 22 members 1,127 guests
Please welcome our newest community members: