TouchClick events

On touch devices, the click event can be somewhat slow (there is a noticeable delay between the end of touch and the triggering of click). One common solution is to replace the click event by a touchend event, but this will break compatibility on devices which use both touch and mouse events (for instance, laptops with touch screens). Another common solution is to use a small JS lib, but this works only for links and performs badly for delegated events.

To enhance the user experience and provide a better responding feeling, the template provides a touch-click technique: a callback is bound to both events touchend and click, and a special function is used to determine which event to handle.

How to use it

First, start by listening both to click and touchend events:

$(selector).on('touchend click', function(event) {
	...
});

Then use the template method to determine if the event should be processed:

$(selector).on('touchend click', function(event)
{
	// Check if valid touch-click event
	if (!$.template.processTouchClick(this, event))
	{
		return;
	}

	// Process event here
});

How does it works?

This features works as follow:

On touch screens

1. Once the user stop touching the screen, a touchend event is triggered, which fires up the callback set above for the first time.
2. To determine if the event should be handled, the template use an internal listener to check if this touch event was used to scroll the screen or not (basically, if the finger has moved during it). If no scrolling was detected, the event is valid and should be processed.
3. The element is then tagged with the event ID, indicating that it has processed this events trail.
4. When the click event fires in short after, the callback is fired for the second time, the function checks if the element has already processed this event trail, and prevents the event if so.

On non-touch devices

1. For these devices, the click event is the only one handled, thus it works normally.
2. When the callback is fired, the function checks if the element has already processed this event trail, and returns true so the event is processed.