A tutorial for service.ontouchclick.jquery - Touch/Click Listener

November 14, 2014

Overview

service.ontouchclick.jquery is a lightweight (less than 1 kB minified) jQuery plugin that allows a developer to attach a callback function to a DOM element; the callback is called when the user touches or clicks the element.

On devices where the user must click on an element the callback is invoked immediately when the 'click' event is occuring.
On touch devices the callback is triggered as soon as the 'touchend' event is coming up (the user releases the tap) or when the 'click' event comes up, whatever occurs first. Depending on 'meta' settings in the webpage, the 'click' event might automatically fire 300ms after the user makes a tap.

The above concept therefore also eliminates the use of double tap. If you want to have that then you have to consider an alternative approach (and probably write the necessary javascript code for this.). You can style the element by adding the class touchStart in your CSS. This class is inserted when the user taps on the element and is removed when the event fires.

Demo

None.

Download

You can download the latest version of the plugin at GitHub.

Usage

To use the plugin start with adding the following to your header section:

<script src="[your-path]/service.ontouchclick.jquery.min.js"></script>

Then, write some javascript to instantiate a jQuery object for the DOM element for which you want to have a touch/click handler. Do this as follows:

<script type="text/javascript">
  $(function () {
    // Bind touch/click event handler
    $('#aButton').ontouchclick( function (evt) {
      // Handle event
      ...
    });
  });
</script>

As you can see you must pass a function which will be called when someone taps or clicks on the element. The function comes with a parameter that holds the web event object.

API

Initialization method

[jqObject(s)].ontouchclick({ eventData: data }, function (evt) { }

Parameter 1: Option object

This parameter is an optional initialization object holding key/value pairs. When provided it must be the 1st parameter.

The following key/value pairs are supported:

eventData

Type: Any data type
Default: null
This option allows the user to pass any javascript user data variable to the plugin component. The data will be stored inside the plugin object and later returned back to the user as parameter in the click/touch callback.

Parameter 2: Event handler

function

Signature: function (evt) { }
evt: The web event object representing the click/touch event.
The event handler is called when the user clicks or touches the DOM element. In case user data has been passed at the moment the plugin instance was assigned to the element (through the eventData) parameter) then this data can be retrieved from the event through the property evt.data.eventData.
Example:

<script type="text/javascript">
  $(function () {
    $('#aButton').ontouchclick({ eventData: 10 }, function (evt) {
      // Process event
      var userData = evt.data.eventData; // Assigns '10'
      ...
    });
  });
</script>

Other methods