├── package.json ├── LICENSE ├── tappy.js ├── README.md ├── docs.css └── index.html /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tappy-js", 3 | "version": "0.1.3", 4 | "description": "A lightweight normalized tap event.", 5 | "main": "tappy.js", 6 | "scripts": { 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/filamentgroup/tappy.git" 11 | }, 12 | "keywords": [ 13 | "tap", 14 | "touch", 15 | "click" 16 | ], 17 | "author": "Filament Group ", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/filamentgroup/tappy/issues" 21 | }, 22 | "homepage": "https://github.com/filamentgroup/tappy" 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Filament Group 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /tappy.js: -------------------------------------------------------------------------------- 1 | /*! Tappy! - a lightweight normalized tap event. Copyright 2013 @scottjehl, Filament Group, Inc. Licensed MIT */ 2 | (function( w, $, undefined ){ 3 | 4 | // handling flag is true when an event sequence is in progress (thx androood) 5 | w.tapHandling = false; 6 | w.tappy = true; 7 | 8 | var tap = function( $els ){ 9 | return $els.each(function(){ 10 | 11 | var $el = $( this ), 12 | resetTimer, 13 | startY, 14 | startX, 15 | cancel, 16 | scrollTolerance = 10; 17 | 18 | function trigger( e ){ 19 | $( e.target ).trigger( "tap", [ e, $( e.target ).attr( "href" ) ] ); 20 | } 21 | 22 | function getCoords( e ){ 23 | var ev = e.originalEvent || e, 24 | touches = ev.touches || ev.targetTouches; 25 | 26 | if( touches ){ 27 | return [ touches[ 0 ].pageX, touches[ 0 ].pageY ]; 28 | } 29 | else { 30 | return null; 31 | } 32 | } 33 | 34 | function start( e ){ 35 | if( e.touches && e.touches.length > 1 || e.targetTouches && e.targetTouches.length > 1 ){ 36 | return false; 37 | } 38 | 39 | var coords = getCoords( e ); 40 | startX = coords[ 0 ]; 41 | startY = coords[ 1 ]; 42 | } 43 | 44 | // any touchscroll that results in > tolerance should cancel the tap 45 | function move( e ){ 46 | if( !cancel ){ 47 | var coords = getCoords( e ); 48 | if( coords && ( Math.abs( startY - coords[ 1 ] ) > scrollTolerance || Math.abs( startX - coords[ 0 ] ) > scrollTolerance ) ){ 49 | cancel = true; 50 | } 51 | } 52 | } 53 | 54 | function end( e ){ 55 | clearTimeout( resetTimer ); 56 | resetTimer = setTimeout( function(){ 57 | w.tapHandling = false; 58 | cancel = false; 59 | }, 1000 ); 60 | 61 | // make sure no modifiers are present. thx http://www.jacklmoore.com/notes/click-events/ 62 | if( ( e.which && e.which > 1 ) || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey ){ 63 | return; 64 | } 65 | 66 | e.preventDefault(); 67 | 68 | // this part prevents a double callback from touch and mouse on the same tap 69 | 70 | // if a scroll happened between touchstart and touchend 71 | if( cancel || w.tapHandling && w.tapHandling !== e.type ){ 72 | cancel = false; 73 | return; 74 | } 75 | 76 | w.tapHandling = e.type; 77 | trigger( e ); 78 | } 79 | 80 | $el 81 | .bind( "touchstart.tappy MSPointerDown.tappy", start ) 82 | .bind( "touchmove.tappy MSPointerMove.tappy", move ) 83 | .bind( "touchend.tappy MSPointerUp.tappy", end ) 84 | .bind( "click.tappy", end ); 85 | }); 86 | }; 87 | 88 | var untap = function( $els ){ 89 | return $els.unbind( ".tappy" ); 90 | }; 91 | 92 | // use special events api 93 | if( $.event && $.event.special ){ 94 | $.event.special.tap = { 95 | add: function( handleObj ) { 96 | tap( $( this ) ); 97 | }, 98 | remove: function( handleObj ) { 99 | untap( $( this ) ); 100 | } 101 | }; 102 | } 103 | else{ 104 | // monkeybind 105 | var oldBind = $.fn.bind, 106 | oldUnbind = $.fn.unbind; 107 | $.fn.bind = function( evt ){ 108 | if( /(^| )tap( |$)/.test( evt ) ){ 109 | tap( this ); 110 | } 111 | return oldBind.apply( this, arguments ); 112 | }; 113 | $.fn.unbind = function( evt ){ 114 | if( /(^| )tap( |$)/.test( evt ) ){ 115 | untap( this ); 116 | } 117 | return oldUnbind.apply( this, arguments ); 118 | }; 119 | } 120 | 121 | }( this, jQuery )); 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚫 Retired: Tappy! 2 | 3 | Per [our unmaintained repository status documentation](https://github.com/filamentgroup/standards-and-conventions/blob/master/repository-maintenance.md#unmaintained) 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](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away)! Hooray 🎉! 4 | 5 | [![Filament Group](http://filamentgroup.com/images/fg-logo-positive-sm-crop.png) ](http://www.filamentgroup.com/) 6 | 7 | Tappy is a minimal normalized tap event that works with touch, mouse, keyboard, and probably other inputs too. 8 | 9 | ©2013 @scottjehl, Filament Group, Inc. Licensed MIT 10 | 11 | ## Why 12 | 13 | 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. 14 | 15 | 16 | ## How-to 17 | 18 | Tappy requires jQuery, or a similar framework of matching API conventions. 19 | 20 | To use, include `tappy.js` in your page, select an element and bind to a `tap` event. 21 | 22 | ``` js 23 | $( "a.my-link" ).bind( "tap", function( e ){ 24 | alert( "tap!" ); 25 | }); 26 | ``` 27 | 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. 28 | 29 | To use tappy to create fast-click navigation, you could do something like this on domready: 30 | 31 | ``` js 32 | $( "a" ).each( function(){ 33 | var href = $( this ).attr( "href" ); 34 | if( href.indexOf( "#" ) !== 0 ){ 35 | $( this ).bind( "tap", function(){ 36 | window.location.href = this.href; 37 | }); 38 | } 39 | } ); 40 | ``` 41 | 42 | ### Unbinding 43 | 44 | ``` js 45 | $( "a.my-link" ).unbind( "tap" ); 46 | ``` 47 | 48 | ## Notes: 49 | 50 | This plugin makes several assumptions that may not work well for your project, but we've found them easy enough to work around. 51 | 52 | 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. 53 | 54 | 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. 55 | 56 | ## What Not To Do 57 | 58 | - Do not bind a child node to the tap event when a parent node is already bound. Ex: 59 | ``` html 60 |
61 |
62 |
63 |
64 | ``` 65 | 66 | ``` js 67 | $( ".foo" ).bind( "tap", function(){ 68 | foo(); 69 | }); 70 | 71 | $( ".bar" ).bind( "tap", function(){ 72 | bar(); 73 | }); 74 | ``` 75 | 76 | 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. 77 | 78 | 79 | - Do not bind a tap event more than once to a single element. Ex: 80 | 81 | ```html 82 | 83 | ``` 84 | 85 | ```js 86 | $( ".btn-classy" ).bind( "tap", function(){ 87 | console.log( "I'm so classy" ); 88 | }); 89 | 90 | $( ".btn-classy" ).bind( "tap", function(){ 91 | console.log( "Cuz I'm close to the... edge." ); 92 | }); 93 | ``` 94 | 95 | If you do this, when the `