Default wipe for some wipes using jQuery touchwipe

2019-04-09 10:07发布

问题:

I'm using this wonderful plugin to capture wipe events on mobile devices: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

I'm using the code in the source of that page to get my image gallery cycling as it should be. However, my image gallery is the full width of the screen. Unfortunately, touchwipe seems to be preventing the default up and down wipes from scrolling up and down the page. Is there a way to make it use the default behaviour, except when other behaviour is specified?

$(document).ready(function() {
    $('#imagegallery').cycle({
        timeout: 0,
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev' 
    });

    $("#imagegallery").touchwipe({
        wipeLeft: function() {
            $("#imagegallery").cycle("next");
        },
        wipeRight: function() {
            $("#imagegallery").cycle("prev");
        }
    });
});

I'm also open to other alternatives to achieving this same effect (other plugins, other methods). Thanks!

回答1:

With this small patch to the jquery.touchwipe library:

if(Math.abs(dx) >= config.min_move_x) {
     cancelTouch();
     if(dx > 0) {
-        config.wipeLeft();
+        config.wipeLeft(e);
     }
     else {
-        config.wipeRight();
+        config.wipeRight(e);
     }
  }
  else if(Math.abs(dy) >= config.min_move_y) {
     cancelTouch();
     if(dy > 0) {
-        config.wipeDown();
+        config.wipeDown(e);
     }
     else {
-        config.wipeUp();
+        config.wipeUp(e);
     }
  }

you can then change your code to selectively call e.preventDefault():

$(document).ready(function() {
    $('#imagegallery').cycle({
        timeout: 0,
        fx: 'scrollHorz',
        next: '#next',
        prev: '#prev' 
    });

    $("#imagegallery").touchwipe({
        wipeLeft: function(e) {
            e.preventDefault();
            $("#imagegallery").cycle("next");
        },
        wipeRight: function(e) {
            e.preventDefault();
            $("#imagegallery").cycle("prev");
        },
        preventDefaultEvents: false
    });
});

(I've submitted the patch to the plugin author.)



回答2:

I've found a temporary answer that partially works, found here: http://plugins.jquery.com/content/vertical-scroll

It would be good to get a better answer though.