jQuery Mobile Touch Events


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

Note 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 »



Color Picker

colorpicker