This repository has been archived by the owner. It is now read-only.
Retired (see README): Tappy! - a lightweight normalized tap event.
Clone or download
Latest commit bd22ad6 Nov 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE May 14, 2014
README.md RETIRED! Nov 30, 2018
docs.css Update docs May 21, 2014
index.html Cherry picking #16 into master Jul 28, 2014
package.json Woops, name conflict. Jan 20, 2015
tappy.js Remove stopImmediateProp. This Allows other events to make it up Oct 20, 2014

README.md

🚫 Retired: Tappy!

Per our unmaintained repository status documentation this repository is now retired and is no longer accepting issue reports or pull requests. The touch delay in web browsers has been solved natively! Hooray 🎉!

Filament Group

Tappy is a minimal normalized tap event that works with touch, mouse, keyboard, and probably other inputs too.

©2013 @scottjehl, Filament Group, Inc. Licensed MIT

Why

Tappy allows you to bind to a tap event like you would any other user interaction, like click. The advantage of usting Tappy's tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the 300ms delay that click events have on platforms like iOS. Once bound to an element, Tappy's tap event will fire upon touch or other traditional interactions like mouse click, pressing the enter key, and more.

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, 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;
				});
			}
} );

Unbinding

$( "a.my-link" ).unbind( "tap" ); 

Notes:

This plugin makes several assumptions that may not work well for your project, but we've found them easy enough to work around.

Tappy works best when bound directly to a tappable element. In its current state, we don't recommend using it with event delegation due to the way it prevents default event behavior. That might change in a future update.

This plugin is built using a very limited portion of jQuery's API in attempt to be compatible with slimmer libraries that share jQuery's syntax. That's why it monkey-patches bind for example, rather than using the Special Events API. That said, we could make those changes, but this is working pretty well for our admittedly specific needs at the moment.

What Not To Do

  • Do not bind a child node to the tap event when a parent node is already bound. Ex:
<div class="foo">
    <div class="bar">
    </div>
</div>
$( ".foo" ).bind( "tap", function(){
    foo();
});

$( ".bar" ).bind( "tap", function(){
    bar();
});

If you do this, when the .bar element is tapped on, due to the nature of how the event is normalized, the callback function for bar will be called twice.

  • Do not bind a tap event more than once to a single element. Ex:
<button class="btn-classy">Don't Push Me</button>
$( ".btn-classy" ).bind( "tap", function(){
    console.log( "I'm so classy" );
});

$( ".btn-classy" ).bind( "tap", function(){
    console.log( "Cuz I'm close to the... edge." );
});

If you do this, when the <button> is clicked, both callback functions will be called, twice.