CODEWITHSUNDEEP
jquery-mobileswipe
Moritz Pfeiffer
Moritz Pfeiffer

Reputation: 487

jquery mobile swipe event disable for input range

I am using jquery mobile to close and open a menu in an app like this:

$('body').on('swipeleft', function(event){
    if(menuOpen == true){
        home.showMenu();
    }
});

$('body').on('swiperight', function(event){
    if(menuOpen == false){
        home.showMenu();
    }
});

And I have a input range (slider) in my menu like this:

<input id="changeRadiusRange" type="range" min="5" max="100" step="5" oninput="handleInputVal(value)" onchange="handleChangeVal(this.value)">

Now if I use my slider it stops after some time (I think the 30pixel for swipeleft/right to get fired and menu is closing if it is a swipeleft)

I already tried a few things regarding to this question, that results in this but didn't changed the behavior:

$('#changeRadiusRange').on('swipeleft swiperight', function(e){
    e.stopPropagation();
    e.preventDefault();
});

How can I force input behavior as normal not to be influenced by swipe-events?

Upvotes: 0

Views: 1736

Answers (3)

Max
Max

Reputation: 621

This worked for me with jqm 1.4.5:

$(document).on('mousedown touchstart', 'input[type=range]',
function(e){
e.stopPropagation();
});

Upvotes: 1

Bert K&#246;&#223;ler
Bert K&#246;&#223;ler

Reputation: 106

I had the same problem today and found a less hacky solution.

var handleSwipe = function (event) {
    // my swipe stuff
}

// regular event listening
$(document).on("swipeleft swiperight", handleSwipe);

// additional workaround
$(".slider").on("mousedown touchstart", function (event) {
    // when starting to interact with a .slider, stop listening the event
    $(document).off("swipeleft swiperight");
}).on("mouseup touchend", function (event) {
    // when interaction stops, re-listen to swipe events
    $(document).on("swipeleft swiperight", handleSwipe);
});

It seems that sliders never ever work properly, as long as the swipe events are used anywhere in the document. This is even the case, when there is nothing done in the event handler. Also preventDefault() and/or stopPropagation() doesn't change anything.

With this solution, I kill the previously enabled swipe events while the user interacts with a slider. When interaction is done, I re-enable swipe events. Works great for me.

Upvotes: 2

Moritz Pfeiffer
Moritz Pfeiffer

Reputation: 487

Currently solved it like this:

$('body').on('swipeleft', function(event){
    if(event.target.id != "changeRadiusRange"){
        if(menuOpen == true){
            home.showMenu();
        }
    }
});

But then slider is stopping after the swipeleft event is called from body. does not move more to the left so I have to release the slider and slide again to the left if I need to till the swipeleft is called etc. Just workaround hope got it fixed soon

Upvotes: 0

Related Questions