JQuery Mobile – Touch Events

JQuery Mobile – Touch Events – Ready to Copy Paste.

JQuery Mobile – Touch Events:

<!-- ############# -->
<!-- TAP (TOCCO)   -->
<!-- ############# -->

// finger quick touch or quick mouse click 
$(function(){
  $( "div.box" ).bind( "tap", tapHandler );
 
  function tapHandler( event ){
    ... you want to do ...
  }
});

// finger long touch or long mouse click - over 750 milliseconds
$(function(){
  $( "div.box" ).bind( "taphold", tapholdHandler );
 
  function tapholdHandler( event ){
    ... you want to do ...
  }
});

<!-- #############    -->
<!-- SWIPE (STRISCIO) -->
<!-- #############    -->

// finger swipe or mouse drag - horizontal drag >=30px, vertical drag <75px, within 1000 milliseconds
$(function(){
  // Bind the swipeHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swipe", swipeHandler );
 
  // Callback function references the event target and adds the 'swipe' class to it
  function swipeHandler( event ){
    ... you want to do ...
  }
});

// finger swipe LEFT or mouse drag LEFT - horizontal drag >=30px, vertical drag <75px, within 1000 milliseconds
$(function(){
  // Bind the swipeleftHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swipeleft", swipeleftHandler );
 
  // Callback function references the event target and adds the 'swipeleft' class to it
  function swipeleftHandler( event ){
    ... you want to do ...
  }
});

// finger swipe RIGHT or mouse drag RIGHT - horizontal drag >=30px, vertical drag <75px, within 1000 milliseconds
$(function(){
    // Bind the swiperightHandler callback function to the swipe event on div.box
  $( "div.box" ).on( "swiperight", swiperightHandler );
 
  // Callback function references the event target and adds the 'swiperight' class to it
  function swiperightHandler( event ){
    ... you want to do ...
  }
});

My official WebSite >