I am having a few issues with some events I am making.
on my document.ready I have
jQuery(document).ready(function () {
//deal with clicks
jQuery(".touchslider-prev").click( function() {
jQuery(window).trigger('swipeForward');
});
jQuery(".touchslider-next").click( function() {
jQuery(window).trigger('swipeBackward');
});
//deal with swipe
var maxTime = 1000,
// allow movement if < 1000 ms (1 sec)
maxDistance = 50,
// swipe movement of 50 pixels triggers the swipe
target = jQuery('.pageSize'),
startX = 0,
startTime = 0,
touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';
target.bind(startEvent, function(e) {
// prevent image drag (Firefox)
// e.preventDefault();
startTime = e.timeStamp;
startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
startTime = 0;
startX = 0;
}).bind(moveEvent, function(e) {
// e.preventDefault();
var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
// allow if movement < 1 sec
currentTime = e.timeStamp;
if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
if (currentX < startX) {
// swipe left code here
console.log("page forward trigger");
jQuery(window).trigger('swipeForward');
}
if (currentX > startX) {
// swipe right code here
console.log("page back trigger");
//slide("back", pageSize);
jQuery(window).trigger('swipeBackward');
}
startTime = 0;
startX = 0;
}
});
//handle triggers from click and slide
jQuery(window).on('swipeForward', clickHandlerNext );
jQuery(window).on('swipeBackward', clickHandlerPrev );
});
If i then click forward or swipe forward this should trigger swipeForward which brings this bit of code into play jQuery(window).on('swipeForward', clickHandlerNext );
so the function clickHandlerNext should be run
function clickHandlerPrev(event) {
if(event.handled !== true) {
// Kill event handler, preventing any more clicks
jQuery(window).off("click", clickHandlerPrev);
jQuery(window).off("click", clickHandlerNext);
console.log("switch off handlers");
// Do your stuff here
slide("back");
// Mark event as handled
event.handled = true;
}
return false;
}
function clickHandlerNext(event) {
// If event isn't already marked as handled, handle it
if(event.handled !== true) {
// Kill event handler, preventing any more clicks
jQuery(window).off("click", clickHandlerPrev);
jQuery(window).off("click", clickHandlerNext);
console.log("switch off handlers");
// Do your stuff here
slide("forward");
// Mark event as handled
event.handled = true;
}
return false;
}
this should switch off the handler and then run the slide function.
function slide(data) {
jQuery('#pageHolder').animate({
left: 950
}, 400, function() {
console.log("animation started");
console.log("switch on handles");
jQuery(window).on("click", clickHandlerPrev);
jQuery(window).on("click", clickHandlerNext);
console.log("animation complete");
});
}
This then turns back on the handler. If i however remove the line jQuery(window).on("click", clickHandlerPrev); the next time i press the button it still runs the handler - but it shouldn't as it should be set .off
can anyone help?
thanks