├── .gitignore ├── .travis.yml ├── Gulpfile.js ├── LICENSE ├── README.md ├── bower.json ├── component.json ├── dist ├── clicktap.js └── clicktap.min.js ├── index.js ├── package.json └── test ├── test.html └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 6.9.1 4 | before_script: 5 | - npm install -g gulp 6 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Module Dependencies. 5 | */ 6 | var mkdirp = require('mkdirp'); 7 | var gulp = require('gulp'); 8 | var header = require('gulp-header'); 9 | var footer = require('gulp-footer'); 10 | var replace = require('gulp-replace'); 11 | var rename = require('gulp-rename'); 12 | var ugifyjs = require('gulp-uglify'); 13 | var mocha = require('gulp-mocha-phantomjs'); 14 | 15 | /** 16 | * Package 17 | */ 18 | var pkg = require('./package.json'); 19 | 20 | /** 21 | * Name 22 | */ 23 | var name = 'clicktap'; 24 | 25 | /** 26 | * Templates 27 | */ 28 | var prefix = ['/*!', 29 | ' * <%= pkg.name %> - v<%= pkg.version %>', 30 | ' *', 31 | ' * Copyright (c) ' + new Date().getFullYear() + ', <%= pkg.author %>', 32 | ' * Released under the MIT license.', 33 | ' */', 34 | '(function(window) {', 35 | ''].join('\n'); 36 | 37 | var postfix = '\n}(this));'; 38 | 39 | var umd = [ 40 | '// AMD', 41 | 'if (typeof window.define === \'function\' && window.define.amd !== undefined) {', 42 | ' window.define(\'' + name + '\', [], function () {', 43 | ' return ' + name + ';', 44 | ' });', 45 | '// CommonJS', 46 | '} else if (typeof module !== \'undefined\' && module.exports !== undefined) {', 47 | ' module.exports = ' + name + ';', 48 | '// Browser', 49 | '} else {', 50 | ' window.' + name + ' = ' + name + ';', 51 | '};' 52 | ].join('\n'); 53 | 54 | /** 55 | * Create directory 56 | */ 57 | mkdirp('./dist'); 58 | 59 | /** 60 | * Build task 61 | */ 62 | gulp.task('build', function() { 63 | mkdirp('./dist'); 64 | gulp.src('./index.js') 65 | .pipe(header(prefix, { 'pkg' : pkg })) 66 | .pipe(footer(postfix)) 67 | .pipe(replace('module.exports = ' + name + ';', umd)) 68 | .pipe(rename(pkg.name + '.js')) 69 | .pipe(gulp.dest('./dist/')); 70 | }); 71 | 72 | /** 73 | * Min task 74 | */ 75 | gulp.task('min', function() { 76 | gulp.src('./dist/' + pkg.name + '.js') 77 | .pipe(ugifyjs()) 78 | .pipe(rename(pkg.name + '.min.js')) 79 | .pipe(gulp.dest('./dist/')); 80 | }); 81 | 82 | /** 83 | * Test task 84 | */ 85 | gulp.task('test', function() { 86 | return gulp.src('./test/test.html') 87 | .pipe(mocha({'reporter': 'spec'})); 88 | }); 89 | 90 | /** 91 | * Register tasks 92 | */ 93 | gulp.task('default', ['build']); 94 | gulp.task('dist', ['build', 'min']); 95 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Guille Paz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # clicktap [![Build Status](https://secure.travis-ci.org/pazguille/clicktap.png)](http://travis-ci.org/pazguille/clicktap) [![devDependency Status](https://david-dm.org/pazguille/clicktap/dev-status.png)](https://david-dm.org/pazguille/clicktap#info=devDependencies) 2 | 3 | > A JavaScript library to prevent the 300ms click delay on touch devices. 4 | 5 | ## Installation 6 | 7 | $ npm install clicktap 8 | 9 | $ bower install clicktap 10 | 11 | $ component install pazguille/clicktap 12 | 13 | ## Usage 14 | ```html 15 | 16 | ``` 17 | 18 | ```js 19 | function litenerFunction() { 20 | // Some code here! 21 | } 22 | 23 | var btn = document.getElementById('btn'); 24 | 25 | clicktap(btn, litenerFunction); 26 | ``` 27 | 28 | ## API 29 | 30 | ### clicktap(el, listener, [capture]); 31 | ### clicktap.on(el, listener, [capture]); 32 | Adds a `listener` to a given `HTMLElement` on click/tap event. 33 | - `el` {HTMLElement} - A given `HTMLElement`. 34 | - `listener` {Function} - A given `listener` to execute on click/tap. 35 | - `capture` {Boolean} - Indicate if use capture path. 36 | 37 | ```js 38 | clicktap(document, litenerFunction, true); 39 | 40 | // or 41 | 42 | clicktap.on(document, litenerFunction); 43 | ``` 44 | 45 | ### clicktap.off(el, listener); 46 | Removes a `listener` from a given `HTMLElement`. 47 | - `el` {HTMLElement} - A given `HTMLElement`. 48 | - `listener` {Function} - A given `listener` to execute on click/tap. 49 | 50 | ```js 51 | clicktap.off(document, litenerFunction); 52 | ``` 53 | 54 | ## Made and maintained with ❤ by 55 | - Guille Paz (Front-end developer | Web standards lover) 56 | - E-mail: [guille87paz@gmail.com](mailto:guille87paz@gmail.com) 57 | - Twitter: [@pazguille](http://twitter.com/pazguille) 58 | - Web: [http://pazguille.me](http://pazguille.me) 59 | 60 | ## License 61 | MIT license. Copyright © 2014. 62 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clicktap", 3 | "repository": "git@github.com:pazguille/clicktap.git", 4 | "description": "A JavaScript library to prevent the 300ms click delay on touch devices.", 5 | "author": "@pazguille ", 6 | "version": "0.0.4", 7 | "ignore": [ 8 | ".*", 9 | "package.json", 10 | "component.json", 11 | "node_modules", 12 | "gulpfile.js", 13 | "**/.*", 14 | "bower_components", 15 | "test" 16 | ], 17 | "main": "dist/clicktap", 18 | "license": "MIT", 19 | "homepage": "https://github.com/pazguille/clicktap", 20 | "moduleType": [ 21 | "adecouplemd", 22 | "globals", 23 | "node" 24 | ], 25 | "keywords": [ 26 | "mobile", 27 | "touch", 28 | "tap", 29 | "click", 30 | "delay" 31 | ], 32 | "authors": [ 33 | "@pazguille " 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clicktap", 3 | "repo": "pazguille/clicktap", 4 | "description": "A JavaScript library to prevent the 300ms click delay on touch devices.", 5 | "version": "0.0.3", 6 | "author": "@pazguille ", 7 | "twitter": "@pazguille", 8 | "keywords": [ 9 | "mobile", 10 | "touch", 11 | "tap", 12 | "click", 13 | "delay" 14 | ], 15 | "dependencies": {}, 16 | "development": {}, 17 | "license": "MIT", 18 | "scripts": [ 19 | "index.js" 20 | ] 21 | } -------------------------------------------------------------------------------- /dist/clicktap.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * clicktap - v0.0.3 3 | * 4 | * Copyright (c) 2016, @pazguille 5 | * Released under the MIT license. 6 | */ 7 | (function(window) { 8 | 'use strict'; 9 | 10 | /** 11 | * Privates 12 | */ 13 | var doc = window.document, 14 | msPointerSupported = window.navigator.msPointerEnabled, 15 | touch = { 16 | 'start': msPointerSupported ? 'MSPointerDown' : 'touchstart', 17 | 'move': msPointerSupported ? 'MSPointerMove' : 'touchmove', 18 | 'end': msPointerSupported ? 'MSPointerUp' : 'touchend' 19 | }, 20 | pointerCanceled = false; 21 | 22 | /** 23 | * Adds touch events if browser supports it 24 | */ 25 | if ('createTouch' in doc) { 26 | doc.addEventListener(touch.start, function() { pointerCanceled = false; }, false); 27 | doc.addEventListener(touch.move, function() { pointerCanceled = true; }, false); 28 | } 29 | 30 | /** 31 | * Adds a listener to the collection for a specified event. 32 | * @public 33 | * @function 34 | * @name clicktap#on 35 | * @param {String} el - DOM element. 36 | * @param {Function} listener - Listener function. 37 | * @param {Boolean} [capture] - Indicate if use capture path. 38 | * @example 39 | * var startDoingStuff = function (event, param1, param2, ...) { 40 | * // Some code here! 41 | * }; 42 | * 43 | * clicktap(document, startDoingStuff, false); 44 | */ 45 | function clicktap(el, listener, capture) { 46 | 47 | function fn(eve) { 48 | if (pointerCanceled) { pointerCanceled = false; return; } 49 | listener.call(el, eve); 50 | eve.preventDefault(); 51 | } 52 | 53 | listener.fn = fn; 54 | 55 | el.addEventListener(touch.end, listener.fn, capture || false); 56 | el.addEventListener('click', listener.fn, capture || false); 57 | 58 | return clicktap; 59 | } 60 | 61 | /** 62 | * Adds a listener to a given HTMLElement on click/tap event. 63 | * @public 64 | * @function 65 | * @param {String} el - DOM element. 66 | * @param {Function} listener - Listener function. 67 | * @param {Boolean} [capture] - Indicate if use capture path. 68 | * @example 69 | * var startDoingStuff = function (event, param1, param2, ...) { 70 | * // Some code here! 71 | * }; 72 | * 73 | * clicktap.on(document, startDoingStuff); 74 | */ 75 | clicktap.on = clicktap; 76 | 77 | /** 78 | * Removes a listener from a given HTMLElement. 79 | * @public 80 | * @function 81 | * @param {String} el - DOM element. 82 | * @param {Function} listener = Listener function. 83 | * @returns itself 84 | * @example 85 | * clicktap.off(document, startDoingStuff); 86 | */ 87 | clicktap.off = function(el, listener) { 88 | el.removeEventListener(touch.end, listener.fn); 89 | el.removeEventListener('click', listener.fn); 90 | return clicktap; 91 | }; 92 | 93 | /** 94 | * Expose clicktap 95 | */ 96 | // AMD 97 | if (typeof window.define === 'function' && window.define.amd !== undefined) { 98 | window.define('clicktap', [], function () { 99 | return clicktap; 100 | }); 101 | // CommonJS 102 | } else if (typeof module !== 'undefined' && module.exports !== undefined) { 103 | module.exports = clicktap; 104 | // Browser 105 | } else { 106 | window.clicktap = clicktap; 107 | }; 108 | 109 | }(this)); -------------------------------------------------------------------------------- /dist/clicktap.min.js: -------------------------------------------------------------------------------- 1 | !function(n){"use strict";function e(n,o,i){function r(e){return u?(u=!1,void 0):(o.call(n,e),e.preventDefault(),void 0)}return o.fn=r,n[t](c.end,o.fn,i||!1),n[t]("click",o.fn,i||!1),e}var t="addEventListener",o="removeEventListener",i=n.document,r=n.navigator.msPointerEnabled,c={start:r?"MSPointerDown":"touchstart",move:r?"MSPointerMove":"touchmove",end:r?"MSPointerUp":"touchend"},u=!1;"createTouch"in i&&(i[t](c.start,function(){u=!1},!1),i[t](c.move,function(){u=!0},!1)),e.on=e,e.off=function(n,t){return n[o](c.end,t.fn),n[o]("click",t.fn),e},"function"==typeof n.define&&void 0!==n.define.amd?n.define("clicktap",[],function(){return e}):"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:n.clicktap=e}(this); -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Privates 5 | */ 6 | var doc = window.document, 7 | msPointerSupported = window.navigator.msPointerEnabled, 8 | touch = { 9 | 'start': msPointerSupported ? 'MSPointerDown' : 'touchstart', 10 | 'move': msPointerSupported ? 'MSPointerMove' : 'touchmove', 11 | 'end': msPointerSupported ? 'MSPointerUp' : 'touchend' 12 | }, 13 | pointerCanceled = false; 14 | 15 | /** 16 | * Adds touch events if browser supports it 17 | */ 18 | if ('createTouch' in doc) { 19 | doc.addEventListener(touch.start, function() { pointerCanceled = false; }, false); 20 | doc.addEventListener(touch.move, function() { pointerCanceled = true; }, false); 21 | } 22 | 23 | /** 24 | * Adds a listener to the collection for a specified event. 25 | * @public 26 | * @function 27 | * @name clicktap#on 28 | * @param {String} el - DOM element. 29 | * @param {Function} listener - Listener function. 30 | * @param {Boolean} [capture] - Indicate if use capture path. 31 | * @example 32 | * var startDoingStuff = function (event, param1, param2, ...) { 33 | * // Some code here! 34 | * }; 35 | * 36 | * clicktap(document, startDoingStuff, false); 37 | */ 38 | function clicktap(el, listener, capture) { 39 | 40 | function fn(eve) { 41 | if (pointerCanceled) { pointerCanceled = false; return; } 42 | listener.call(el, eve); 43 | eve.preventDefault(); 44 | } 45 | 46 | listener.fn = fn; 47 | 48 | el.addEventListener(touch.end, listener.fn, capture || false); 49 | el.addEventListener('click', listener.fn, capture || false); 50 | 51 | return clicktap; 52 | } 53 | 54 | /** 55 | * Adds a listener to a given HTMLElement on click/tap event. 56 | * @public 57 | * @function 58 | * @param {String} el - DOM element. 59 | * @param {Function} listener - Listener function. 60 | * @param {Boolean} [capture] - Indicate if use capture path. 61 | * @example 62 | * var startDoingStuff = function (event, param1, param2, ...) { 63 | * // Some code here! 64 | * }; 65 | * 66 | * clicktap.on(document, startDoingStuff); 67 | */ 68 | clicktap.on = clicktap; 69 | 70 | /** 71 | * Removes a listener from a given HTMLElement. 72 | * @public 73 | * @function 74 | * @param {String} el - DOM element. 75 | * @param {Function} listener = Listener function. 76 | * @returns itself 77 | * @example 78 | * clicktap.off(document, startDoingStuff); 79 | */ 80 | clicktap.off = function(el, listener) { 81 | el.removeEventListener(touch.end, listener.fn); 82 | el.removeEventListener('click', listener.fn); 83 | return clicktap; 84 | }; 85 | 86 | /** 87 | * Expose clicktap 88 | */ 89 | module.exports = clicktap; 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clicktap", 3 | "repository": "git@github.com:pazguille/clicktap.git", 4 | "description": "A JavaScript library to prevent the 300ms click delay on touch devices.", 5 | "author": "@pazguille ", 6 | "version": "0.0.3", 7 | "scripts": { 8 | "start": "gulp", 9 | "test": "gulp test" 10 | }, 11 | "devDependencies": { 12 | "better-assert": "^1.0.1", 13 | "gulp": "^3.6.2", 14 | "gulp-footer": "^1.0.5", 15 | "gulp-header": "^1.0.5", 16 | "gulp-mocha-phantomjs": "^0.12.0", 17 | "gulp-rename": "^1.2.0", 18 | "gulp-replace": "^0.5.4", 19 | "gulp-uglify": "^2.0.0", 20 | "mkdirp": "^0.5.1" 21 | }, 22 | "main": "index.js", 23 | "keywords": [ 24 | "mobile", 25 | "touch", 26 | "tap", 27 | "click", 28 | "delay" 29 | ], 30 | "license": "MIT" 31 | } 32 | -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | clicktap Tests 5 | 6 | 7 | 8 |
9 | 10 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | if (typeof window === 'undefined') { 2 | var clicktap = require('../'), 3 | assert = require('better-assert'); 4 | } 5 | 6 | describe('clicktap', function () { 7 | it('should be defined', function () { 8 | assert(typeof clicktap === 'function'); 9 | }); 10 | 11 | it('should be defined "on" method', function () { 12 | assert(typeof clicktap.on === 'function'); 13 | }); 14 | 15 | it('should be defined "off" method', function () { 16 | assert(typeof clicktap.off === 'function'); 17 | }); 18 | }); --------------------------------------------------------------------------------