Reputation: 456
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:)
Upvotes: 2
Views: 2999
Reputation: 5473
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
Upvotes: 1