switching e.preventDefault() on and off so swipe works on android
Here's a snippet of code that triggers events on swipe left and swipe right.
the problem is with androids then need e.preventDefault() to be called to ensure this can happen according to http://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=4549
Here is my code
- 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) {
- 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
- //slideMobile("forward", pageSize);
-
- console.log("swipeForward");
- jQuery(window).trigger('swipeForward');
-
- }
- if (currentX > startX) {
- // swipe right code here
- //slideMobile("back", pageSize);
-
- console.log("swipeBackward");
- jQuery(window).trigger('swipeBackward');
-
-
- }
- startTime = 0;
- startX = 0;
- }
- });
I am struggling to know where to put these e.preventDefault() as surely I need to switch the prevent off afterwards as otherwise after the first swipe it will not do anything?
If I add here
- 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;
- })
I can now swipe left and right - but the scrolling up and down is disabled due to the prevent default.
Can anyone help?