Swipe, swipeleft, swiperight events do not trigger on image

Question

I want use jQuery mobile's swiperight event in combination with an image, which doesn't seem to function.

HTML:

<div id="one"><img src="http://jquerymobile.com/wp-content/uploads/2012/09/jquery-mobile-logo-03.png"/></div>
<div id="two">works</div>

JS:

$("#one").on("swiperight", function() {
    alert("does not work");
});
$("#two").on("swiperight", function() {
    alert("works");
});

JSFiddle

score 4 · Accepted Answer · edited May 23 '17 at 11:51

4

I'm quite sure only desktop browser have this issue as mobile browsers usually don't drag images on swipe.

The solution suggested here prevents dragging your image in all browsers:

$('img').on('dragstart', function(event) {
    event.preventDefault();
});

So here is your new working fiddle: http://jsfiddle.net/4CbEQ/1/

edited May 23 '17 at 11:51

Community

1
1

answered Mar 25 '13 at 08:55

saschoar

8,150
5
43
46

score 3 · Answer 2 · answered Mar 25 '13 at 09:02

You need to prevent image dragging, here's a working example: http://jsfiddle.net/Gajotres/SgUZK/

$(document).on('pagebeforeshow', '#index', function(){   
    $('img').on('dragstart', function(event) { event.preventDefault(); });

    $("#one").on("swiperight", function() {
        alert("does not work");
    });
    $("#two").on("swiperight", function() {
        alert("works");
    });
});

Swipe, swipeleft, swiperight events do not trigger on image

2 Answers2