Latest web development tutorials
 

jQuery Mobile Touch Events


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

Touch events also work on desktop computers: tap and swipe with your mouse!


jQuery Mobile Tap

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

The following example says: When a tap event fires on a <p> element; hide the current <p> element:

Example

$("p").on("tap",function(){
  $(this).hide();
});
Try it Yourself »

jQuery Mobile Taphold

The taphold event is triggered when the user taps on an element and hold for one second:

Example

$("p").on("taphold",function(){
  $(this).hide();
});
Try it Yourself »

jQuery Mobile Swipe

The swipe event is triggered when the user swipes over an element horizontally 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 over an element in the left direction 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 drags over an element in the right direction by more than 30px:

Example

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