jQuery swipe disable on desktop

Question

i'm using jQuery mobile and on mobiles it's working great but i don't want it to work on desktop. how can i prevent that? it can be very confusing for desktop users also if the user is trying to highlight text.

YaBCK · Answer 1 · 2018-05-15T16:21:17.090

2

You could always check if you are on a desktop device?

if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
   $(document).ready(function(){
      $(document).on('swipeleft swiperight', 'html', function(event) {
             console.log("IN HERE");
             event.stopPropagation();
             event.preventDefault();
        }); 
   });
}

$(document).on('swipeleft swiperight', function () {
    $.mobile.changePage('#bar');
});

JSFIDDLE EXAMPLE

Answer for Marcelo Agimovel:

var timeoutId = 0;

$('ELEMENTHERE').on('mousedown', function() {
    timeoutId = setTimeout(myFunction, 1000);
}).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

edited May 15 '18 at 16:21

answered Oct 01 '15 at 12:20

YaBCK

3,205
3
26
52

I'm facing the oposite issue: I want to enable hold click to swap datatable. You know how can I achieve that? – Marcelo Agimóvel May 01 '18 at 18:51
@MarceloAgimóvel Please check my updated answer - you can just check for mousedown and mouseleave – YaBCK May 15 '18 at 16:22
Thank your for your input, what I need is to allow swipe when client hold click and drag left or right, your code does that? I'm reading but can't tell. – Marcelo Agimóvel May 16 '18 at 16:49

Junior · Answer 2 · 2019-06-04T21:34:32.823

This is a good question. I cannot understand down votes. I search for a solution too because on desktop selecting text (even inside a text input) fires swipe event. So, the solution for the moment is:

var touchCapable = false;

$(document).one('touchstart', function(e){
    //we know that the device supports touch
    touchCapable = true;
});

$(document).on( "swipeleft swiperight", function( e ) {
    if(!touchCapable){
        e.stopPropagation();
        e.preventDefault();
    }else{
        ...
    }
});

The code is a short version that I use for now.

Update Or we can initialize touchCapable like this:

// https://stackoverflow.com/a/48810709/2947462
var touchCapable = (('ontouchstart' in window)
    || (navigator.maxTouchPoints > 0)
    || (navigator.msMaxTouchPoints > 0)
    || (window.TouchEvent));

jQuery swipe disable on desktop

2 Answers2