Disabling swipe on a specific div

13,589

Solution 1

.on('swipeleft swiperight', function(e){

as opposed to

.swipe(function(e){

While I'm not 100% confident in this answer, a feel trials revealed that there will still be issues with the code and you might have to do a sanity check in the original element, something like,

if($.inArray('full-width-slider', $.trim($(e.target).prop('id')).split(' ')) > -1){
    //full with slider is the target, so return out 
}

Solution 2

I think you're looking for this:

event.stopImmediatePropagation();

This should stop the swipe from bubbling.

Your code

$('#full-width-slider').swipe(function(e){
    e.stopImmediatePropagation();
    e.preventDefault();
});
Share:
13,589
Afonso Gomes
Author by

Afonso Gomes

:)

Updated on June 04, 2022

Comments

  • Afonso Gomes
    Afonso Gomes over 1 year

    Having this jQuery Mobile 1.9.1 code, to take care of showing side panels when the user swipes right or left...

    $(document).on("pageinit",".ui-page",function(){
    
        var $page=$(this);
        $page.on("swipeleft swiperight",function(e){
            if($page.jqmData("panel")!=="open"){
                if(e.type==="swiperight"){
                    $page.find("#menu").panel("open");
                }else if(e.type==="swipeleft"){
                    $page.find("#menu2").panel("open");
                }
            }
        });
    });
    

    This creates a problem when using an image slider with swiping capabilities. Inside the slider div when I swipe right it changes to the next photo and opens the panel...

    I just tryed doing this:

        $('#full-width-slider').swipe(function(e){
            e.stopPropagation();
            e.preventDefault();
        });
    

    but it doesn't work at all.

    Is there any way to disable the jQuery Mobile native slide function inside the div #full-width-slider ?

    Thanks in advance.