Hammer.js cannot remove event listener

Question

I create a hammer case like this:

var el = document.getElementById("el"); var hammertime = Hammer(el); 

Then I can add a listener:

 hammertime.on("touch", function(e) { console.log(e.gesture); } 

However, I cannot delete this listener because the following does nothing:

 hammertime.off("touch"); 

What am I doing wrong? How do I get rid of a hammer listener? The hammer.js docs are pretty weak right now, so nothing explains that the .on() and .off() methods .on() . I cannot use the jQuery version, as this is a critical application.

JSFiddle to demonstrate this: http://jsfiddle.net/LSrgh/1/

Answer 1

Ok, I figured it out. The source is simple enough, it does:

 on: function(t, e) { for (var n = t.split(" "), i = 0; n.length > i; i++) this.element.addEventListener(n[i], e, !1); return this },off: function(t, e) { for (var n = t.split(" "), i = 0; n.length > i; i++) this.element.removeEventListener(n[i], e, !1); return this } 

Note (other than bad documentation) that e is a callback function in the on event, so you do:

 this.element.addEventListener("touch", function() { //your function }, !1); 

But on deletion, you do not pass the callback so you do:

 this.element.removeEventListener("touch", undefined, !1); 

So, the browser does not know that the witch function is trying to untie, you can fix it without using anonymous functions, as I did in:

Fiddle

For more information: Javascript removeEventListener not working

Answer 2

To unleash events off, you must:

1) Pass as an argument to OFF. the same callback function that was set when calling ON

2) Use the same Hammer instance that is used to set ON events

Example:

 var mc = new Hammer.Manager(element); mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 })); mc.add(new Hammer.Tap()); var functionEvent = function(ev) { ev.preventDefault(); // .. do something here return false; }; var eventString = 'panstart tap'; mc.on(eventString, functionEvent); 

CELESTIAL EVENT:

 mc.off(eventString, functionEvent); 

Answer 3

HammerJS 2.0 now supports unlocking all event handlers:

 function(events, handler) { var handlers = this.handlers; each(splitStr(events), function(event) { if (!handler) { delete handlers[event]; } else { handlers[event].splice(inArray(handlers[event], handler), 1); } }); return this; } 

Answer 4

Here's a CodePen example of what Nico has posted . I created a simple wrapper for tap events (although it could easily be adapted to everything else) to track every Hammer Manager. I also created a kill function to painlessly stop listening: P

 var TapListener = function(callbk, el, name) { // Ensure that "new" keyword is Used if( !(this instanceof TapListener) ) { return new TapListener(callbk, el, name); } this.callback = callbk; this.elem = el; this.name = name; this.manager = new Hammer( el ); this.manager.on("tap", function(ev) { callbk(ev, name); }); }; // TapListener TapListener.prototype.kill = function () { this.manager.off( "tap", this.callback ); }; 

So you basically do something like this:

 var myEl = document.getElementById("foo"), myListener = new TapListener(function() { do stuff }, myEl, "fooName"); // And to Kill myListener.kill();