jQuery Plugin For Additional Touch Events On Mobile Devices

File Size: 161 KB
Views Total: 5830
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Additional Touch Events On Mobile Devices

Touch Events is a jQuery plugin which provides additional touch events & callback functions on mobile devices.

How to use it:

1. Download the Touch Events plugin, include the jquery.mobile-events.min.js after jQuery JavaScript library and we're ready to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.mobile-events.min.js"></script>

2. Touch events included.

  • tapstart: Fired as soon as the user begins touching an element (or clicking, for desktop environments).
  • tapend: Fired after the user releases their finger from the target element (or releases their mouse button on desktops).
  • tapmove: Fired as soon as the user begins moving their finger on an element (or moving their mouse, for desktop environments).
  • tap: Fired whenever the user taps and releases their finger on the target element. Caution should be observed when using this event in conjunction without tap events, especially doubletap. This event will be fired twice when doubletap is used, so it is recommended to use singletap in this case.
  • singletap: Triggered once we are certain the user has only tapped the target element a single time. This will not be triggered by doubletap or taphold, unlike tap. Since we need to run some tests to make sure the user isn't double tapping or holding a tap on the target element, this event is fired with a short delay (currently of 500 milliseconds).
  • doubletap: Triggered whenever the user double taps on the target element. The threshold (time between taps) is currently set at 500 milliseconds.
  • taphold: Triggered whenever the user taps on the target element and leaves their finger on the element for at least 750 milliseconds.
  • swipe: Called whenever the user swipes their finger on the target element. It is not direction-dependent, and is fired regardless of the direction the user swiped.
  • swipeup: Called when the user swipes their finger in an upward direction on the target element (i.e. bottom to top)
  • swiperight: Triggered only when the user swipes their finger left to right on the target element.
  • swipedown: Triggered only when the user swipes their finger top to bottom on the target element.
  • swipeleft: Triggered only when the user swipes their finger from right to left.
  • swipeend: Trigged whenever a swipe event ends (i.e. the user finished moving their finger / cursor and released it). This event should be used to handle custom functions, since it will be triggered only when the swipe ends, rather than triggering immediately when the threshold has been met.
  • scrollstart: Triggered as soon as scrolling begins on the target element.
  • scrollend: Triggered as soon as scrolling is stopped on the target element.
  • orientationchange: Triggered when the orientation of the device is changed. Please note that it uses throttling for non-mobile devices, or devices which do not support the native orientationchange event. In the latter instance, a detection of the viewport size change occurs.

3. You can find full documentation here.

Changelog:

2020-11-18

  • Fixed Wrong function attribute name (also in minified file)

v2.0.2 (2020-04-24)

  • Fixed for incorrect swipe directions.

v2.0.2 (2020-04-22)

  • Fix for binding events to `document` and `window`.

v2.0.1 (2019-12-17)

  • Added two-finger tap event (tap2).

v2.0.0 (2017-05-21)

  • Added two-finger tap event (tap2).
  • Added two-finger taphold event (taphold2).
  • Added setter functions to easily set thresholds globally.
  • Fixed a bug where the offset position of elements was sometimes incorrect.
  • Other minor bug fixes.

2017-02-02

  • v1.0.8: Fixes a bug where certain instances of Chrome on touch devices did not correctly fire events.

2017-02-01

  • v1.0.7: Added threshold support for taphold

This awesome jQuery plugin is developed by benmajor. For more Advanced Usages, please check the demo page or visit the official website.