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:)

Would be good to see the difference between tappableArea and touchableArea and know why they can't co-exist with their hammer behaviors. — Ringo, Jul 21 '13 at 18:37
just two divs, and the only reason why I want to disable this hammer.js behavior is layout setup. In a simple way, after window resize I wan't to unbind all hammer event handlers and reinitialize hammerGestures() function. — user1854236, Jul 21 '13 at 18:40
The code you have looks OK. I dont think anyone can help you with bigger issues or design patterns unless you provide more info. "Layout setup" doesn't give me enough info on why you have to turn behaviors off and re-apply them. Just because you resize a window doesn't mean you have to re-apply behaviors. Can you put your code in a jsfiddle or at least post the HTML here. — Ringo, Jul 21 '13 at 19:18
When fullScreenMode is True, I just don't want to hide my navbars on double tap, because this mode has enough space to show them. So I wanted to disable this behavior, because when I have `hammerGestures()` only on `document.ready()`, when user changes viewport the conditionals don't work.. As I said, I have two views of my page, based on viewport width (one is tablet and the other is phone), and views are totally different. I don't know how to explain this simpler way, I've upgraded the code above :) — user1854236, Jul 21 '13 at 19:32
So in more simple way, It would be cool when I'll be able to unbind all hammer events in `reloadHammerGestures()` function in one line, is it possible? — user1854236, Jul 21 '13 at 19:51

score 1 · Answer 1 · edited May 23 '17 at 11:57

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

edited May 23 '17 at 11:57

Community

1
1

answered Jul 21 '13 at 19:57

Ringo

5,097
3
31
46

Yeap, as i see it's very specific situation, I use jquery version so hammer.destroy() doesn't exists, and the only way is declaring all events that I want to unbind (using .off()). – user1854236 Jul 21 '13 at 20:07

Proper way to set off() in jquery hammer events

1 Answers1