Tutorial: Tap vs swipe

events: tap, doubleTap, longTap, swipe

properties: longTapThreshold, doubleTapThreshold

You can also detect if the user simply taps and does not swipe with the tap handler

The tap, doubleTap and longTap handler are passed the original event object and the target that was clicked.

See also the hold event for when a long tap reaches the longTapThreshold

If you use the jquery.ui.ipad.js plugin (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) you can then also pickup standard jQuery mouse events on children of the touchSwipe object.

You can set the delay between taps which defines a double tap, and the length of a long tap with the doubleTapThreshold and longTapThreshold properties.

Note: If you assign both tap and double tap, you tap events will be delayed by the length of doubleTapThreshold as it waits to see if its a double before trigger the event

tap replaces the old click handler for naming consistency. Since the introduction of event triggering as well as callbacks, the plugin cannot trigger a click event as it clashes with the jQ click event, so both the event and callback are called tap. For backwards compatibility, the click callback will still work but there is no click event. You must use the tap event when binding with on or bind

Jump to Example

    $(function() {
      var tapCount=0;
      var doubleTapCount=0;
      var longTapCount=0;
      var swipeCount=0;
      var blackCount=0;
      //Enable swiping...
      $("#test").swipe( {
        tap:function(event, target) {
          tapCount++;
          msg(target);
        },
        doubleTap:function(event, target) {
          doubleTapCount++;
          msg(target);
          return true;
        },
        longTap:function(event, target) {
          longTapCount++;
          msg(target);
        },
        swipe:function() {
          swipeCount++;
          $("#textText").html("You swiped " + swipeCount + " times");
        },
        excludedElements:"",
        threshold:50
      });
      $("#test_btn").click(function() {
        window.open("http://www.google.com");
      });
      //Assign a click handler to a child of the touchSwipe object
      //This will require the jquery.ui.ipad.js to be picked up correctly.
      $("#another_div").click( function(){
        blackCount++;
        $("#another_div").html("<h3 id='div text'>jQuery click handler fired on the black div : you clicked the black div "+
        blackCount + " times</h3>");
      });
      function msg(target) {
          $("#textText").html("You tapped " + tapCount +", double tapped " +  doubleTapCount + " and long tapped " +  longTapCount + " times on " +  $(target).attr("id"));
      }
    });