jQuery Mobile Touch events

Touch events are triggered when the user touches the screen (page).

Hint:Touch events also apply to desktop computers: click the mouse!

jQuery Mobile Tap

The 'tap' event is triggered when the user taps an element.

The following example hides the current <p> element when the tap event is triggered on the <p> element:

Example

$("p").on("tap",function(){
  $(this).hide();
});

Try It Yourself

jQuery Mobile Taphold

The 'taphold' event is triggered when the user taps an element and holds it for one second:

Example

$("p").on("taphold",function(){
  $(this).hide();
});

Try It Yourself

jQuery Mobile Swipe

The 'swipe' event is triggered when the user horizontally swipes on an element by more than 30px:

Example

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

Try It Yourself

jQuery Mobile Swipeleft

The 'swipeleft' event is triggered when the user swipes left on an element by more than 30px:

Example

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

Try It Yourself

jQuery Mobile Swiperight

The swiperight event is triggered when the user swipes over 30px to the right on an element:

Example

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

Try It Yourself