Tappy: A custom tap event handler
Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more. Tappy allows you to bind to a tap event like you would with other events like click.
The advantage of using Tappy’s tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the brief but noticeable delay that click events have on platforms like iOS (thankfully, this problem is slowly going away in platforms like Chrome for Android). Once bound to an element, Tappy’s tap event will fire upon touch or other traditional interactions like a mouse click, pressing the enter key or space bar, and more.
If you’ve never experienced the speed improvements that touch events provide, try browsing this site on a device like an Apple iPhone - the lack of delays between tapping links and changing pages is quite convenient!
How-to
Permalink to 'How-to'Tappy requires jQuery, or a similar framework of matching API conventions. To use, include tappy.js in your page, select an element and bind to a tap event.
$( "a.my-link" ).bind( "tap", function( e ){
alert( "tap!" );
});
In binding to the tap event, you’ll be automatically preventing the browser’s default click handling on the element, so be sure to handle that tap responsibly.
To use tappy to create fast-click navigation (like this site uses), you could do something like this on domready:
$( "a" ).each( function(){
var href = $( this ).attr( "href" );
if( href.indexOf( "#" ) !== 0 ){
$( this ).bind( "tap", function(){
window.location.href = this.href;
});
}
} );
Visit the project site
Permalink to 'Visit the project site'In order to keep things light and minimal, there are some limitations and assumptions built into Tappy that you should be aware of. You can find those listed on the project site’s readme file.
To download code, file an issue, or read more, you can find Tappy to Github.