SwiftClick is a library created to eliminate the 300ms click event delay on touch devices that support orientation change and is designed to be super lightweight — weighing in at only 957 bytes minified & gzipped!
As many of you will have experienced when using touch devices such as iPhones, tapping on HTML elements sometimes feels a bit sluggish. This is because there is a 300ms delay before click events are fired. As a user experience this is clunky behaviour and so the exploration of potential solutions to this problem worked its way into TMW labs. Since the issue only occurs on devices that support touch events, the initial approach was to simply run a basic test for touch support and create a variable for the event name to use in click listeners – the value of which being either 'touchstart' for devices that support touch, or 'click' for those that don't:
var clickEventType = "ontouchstart" in window ? "touchstart" : "click";
The problem with this detection method is that laptops or monitors that support touch would expect a touch event, meaning that if a mouse was being used then click events wouldn't work. Because of this the detection method was refined to check if the device supports both touch and orientation change and only use touch events if both conditions are met:
var clickEventType = "onorientationchange" in window && "ontouchstart" in window ? "touchstart" : "click";
This detection method worked well in the majority of situations, with the
'clickEventType' variable being used in any event listeners that needed to get a click event:
someEl.addEventListener(clickEventType, fn, false);
This worked pretty nicely, with the main drawback being the fact that the 'clickEventType' variable would have to be used in any place where a click listener is needed, which could potentially become problematic when projects are picked up by new developers who may not necessarily realise that this variable is being used at all.
SwiftClick is inspired by FastClick, but has been designed from the ground up to be super lightweight — weighing in at a mere 6.8KB non-minified and a teeny-tiny 957 bytes (yes, bytes) minified & gzipped!
In contrast with FastClick, which does a lot under the hood to fix obscure bugs in many crappy old mobile browsers for complex elements like
<textarea>, by default SwiftClick focuses on basic element types that are typically used in modern interactive development, providing an option to add in additional element types when necessary.
bower install swiftclick
Include SwiftClick in your application
Setting up SwiftClick is a very easy process, which mirrors that of FastClick in that instances must be attached to a context element. Touch events from all elements within the context element are automatically captured and converted to click events when necessary, minus the delay.
Start by creating a reference to a new instance of SwiftClick using the 'attach' helper method and attach it to a context element. Attaching to document.body is easiest if you only need a single instance of SwiftClick:
var swiftclick = SwiftClick.attach(document.body);
If necessary, multiple instances of SwiftClick can be created for specific context elements which, although not really necessary in most cases, can sometimes be useful for optimising applications with a large amount of HTML:
var navigationSwiftClick = SwiftClick.attach(someNavElement); var uiSwiftClick = SwiftClick.attach(someOtherElement);
Once attached, by default SwiftClick will track events originating from the following element types:
Adding non-default element types
If necessary you can make SwiftClick track events originating from additional element types by adding an array of node names. This requires a reference to an instance of SwiftClick:
var swiftclick = SwiftClick.attach(someElement); swiftclick.addNodeNamesToTrack(["p", "h1", "nav"]);
Replacing all stored node names to track
var swiftclick = SwiftClick.attach(someElement); swiftclick.replaceNodeNamesToTrack(["a", "div"]);
Doing this will remove all default node names, as well as any that have been added, and replace them with the node names within the array that is passed in, resulting in only the new node names being tracked.
Automatically disabled when not needed
SwiftClick only intercepts events for touch devices that support orientation change, otherwise it just sits there looking pretty.
About the Project
SwiftClick was developed and is currently maintained by Ivan Hayes.
Head over to the Github project page to find out more. Go ahead and star the project to keep up with its latest developments :-)