tappy-js

WebJar for tappy-js

License

License

MIT
Categories

Categories

JavaScript Languages
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

tappy-js
Last Version

Last Version

0.1.3
Release Date

Release Date

Type

Type

jar
Description

Description

tappy-js
WebJar for tappy-js
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/filamentgroup/tappy

Download tappy-js

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/tappy-js/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>tappy-js</artifactId>
    <version>0.1.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/tappy-js/
implementation 'org.webjars.npm:tappy-js:0.1.3'
// https://jarcasting.com/artifacts/org.webjars.npm/tappy-js/
implementation ("org.webjars.npm:tappy-js:0.1.3")
'org.webjars.npm:tappy-js:jar:0.1.3'
<dependency org="org.webjars.npm" name="tappy-js" rev="0.1.3">
  <artifact name="tappy-js" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='tappy-js', version='0.1.3')
)
libraryDependencies += "org.webjars.npm" % "tappy-js" % "0.1.3"
[org.webjars.npm/tappy-js "0.1.3"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

🚫 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.

org.webjars.npm

Filament Group

Versions

Version
0.1.3