Tap counter with backward in jQuery

Question

I want to implement simple counter using jQuery functions tap and swiperight. So, on tap the counter should increment its value and on swiperight it should decrement its value. I started simply with usage of above mentioned functions, but on swipe right (backward) and then tapping again the value of counter countinues to increase its value as before swipe right instead of counting from last value of swipe.

For example: after 5 tap the counter shows 5, performing 2 times swipe shows 3, but tapping again shows 6 instead of 4.

Here is the example: JSFIDDLE

$('#counter').on('tap',function(){
    $('#counter').html(++i);
});

$('#counter').on('swiperight',function(){
    $('#counter').html(--i);
});

I'm stuck here, so how to correct it? Any help would be appreciated!

Answer 1

I checked your Fiddle using a touch display and it works fine, the problem exist when I'm using my mouse.

I think the problem is that the tap event fires when you click your mouse to swipe right. Check the jQuery documentation for more info https://api.jquerymobile.com/tap/