Can't select text in TouchSwipe jQuery plugin

Question

TouchSwipe is a great plugin for adding swipe to your website. But I have an issue on selecting text when the this plugin is activated.

     $(window).swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
                dnlShow();
        },
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
                dnlHide();
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
        threshold: 75
      });

Any good solution to fix this issue?

score 2 · Answer 1 · edited May 23 '17 at 12:06

I have found two solutions:

Add .noSwipe class to the content that you want to be selectable. ( in my case it was impossible)

Detect the mobile and tablet devices first then activate this plugin so I did this:

// Check if you are in mobile or not
// Code credit: https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

if ( isMobile() == true ) {
    // Swipe plugin for handling touch events
    $(window).swipe( {
    //Generic swipe handler for all directions
    swipeRight:function(event, direction, distance, duration, fingerCount) {
            dnlShow();
    },
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
            dnlHide();
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold: 75
  });
}

for detecting mobile and tablet devices there are several solutions, you can check at What is the best way to detect a mobile device in jQuery?

I hope this help others too.

score 1 · Answer 2 · answered May 15 '15 at 13:41

You better attach swipe to touch event, so it also work on PC with touchscreen. The code looks like :

$(document).on("touchstart", function(event) {
    $(window).swipe( {
        swipeRight:function(event, direction, distance, duration, fingerCount) {
                dnlShow();
        },
        swipeLeft:function(event, direction, distance, duration, fingerCount) {
                dnlHide();
        },
        threshold: 75
    });
});

Can't select text in TouchSwipe jQuery plugin

2 Answers2