Proper way to set off() in jquery hammer events

Question

I'm wondering what is the best way for setting up my hammer.js configuration on a simple document which I'm working on. Here's my code:

var tappableArea = $('.content');
var touchableArea = $('.sidebar');

function reloadHammerGestures() {
  tappableArea.hammer().off("doubletap");
  touchableArea.hammer().off("swipeleft swiperight");
  hammerGestures();
}

function hammerGestures() {
  tappableArea.hammer().off("doubletap");
  touchableArea.hammer().off("swipeleft swiperight");

  if (fullScreenMode()) {
    touchableArea.hammer().on("swipeleft swiperight", function(event) {
      alert("swiped!");
  });

  else if (!fullScreenMode()) {
    tappableArea.hammer().on("doubletap", function(event) {
      alert("tapped");
    });
  }
}

$(document).ready(function() {
 hammerGestures();
});

$(window).resize(function () {
  reloadHammerGesture();;
});

And the function is both loaded on $(document).ready() and (window).resize(), so that's why i'm making .off() in the beginning.. I'm wondering that this is the wrong method on getting it disabled when screen-mode conditional changes, if you can help me in improving this code, I'll be very happy.

take care and have a nice day:)

Answer 1

Well you can do this:

touchableArea.hammer().off().on(...)

Or $(touchableArea).unbind() would probably work.

Or to do both:

$('#touchableDiv, #tappableDiv').unbind()

ALSO: I see on github that someone added a hammer.destroy() method.

ALSO, SEE: Removing hammer events