Question

I’m developing this small website : Website ; and I’m using HammerJS as a touch support library.

It seems to be responding to the events, and it recognizes the event.type property, but when I’m trying to get the event.direction or other related properties to the drag event nothing is output in the console ( I’m logging the results in the console ).

This is how I listen for the drag event ”

Application.ApplicationController.prototype.Drag = function(selector, delay, callback) {
    return $(selector).on('drag', _.debounce(function(event){
        event.preventDefault();
        return (typeof callback === 'function' && callback !== undefined) ? callback.apply( event, [ event ] ) : 'Argument : Invalid [ Function Required ]';
    }, delay)); 
};

I’m calling it something like :

this.Drag(selector, delay, function(event) {
    console.log(event.type, event.direction);
});

Could someone tell me what am I doing wrong in there or if I’m missing something ?

EDIT : I have just replaced the jQuery library : jquery.specialevents.hammer.js ; with the old jquery.hammer.js ; and it seems like now it’s responding to all events and I get all the properties I should. Still I would like to know why isn’t the one I tried to work with working ?

EDIT : I have found the underlying cause of my issue, my code depends on some libraries which I’m loading asynchronous with the Yepnope script loader, so somewhere along the way instead of loading all the libraries ( including the jquery plugin for hammer.js ), some of them are lost 🙂 I have fixed that issue and now the events have the properties that they’re supposed to.

Answer 1

Still I would like to know why isn’t the one I tried to work with working ?

Understanding the difference between jquery.specialevent.hammer.js and jquery.hammer.js should help understand the problem. Damien, the creator of jquery.specialevent.hammer.js, explains why.

However Eight Media decided to create their own namespace in jQuery to
activate the events.

$("#element").hammer({ /* options */ }).on("tap", function(ev) { 
    console.log(ev); 
}); 

So in the end they are not using the default
jQuery eventing system. That means my existing source code which used
jQuery mobile events has to be change. That’s why I decided to
implement the use of Hammer.JS with the jQuery special eventing API.

$("#element").on("tap", { /* options */ }, function(ev) {
    console.log(ev); 
}); 

I put jquery.specialevent.hammer.js onto my
Github where you can also find a demo. Maybe Eight Media accepts my
pull request and it will be part of Hammer.JS.