Code Monkey home page Code Monkey logo

tap-js's Introduction

TAP.JS

Tap is a Javascript library for easy unified handling of user interactions such as mouse, touch and pointer events.

  • No need to detect what kind of events are supported, Tap handles this for you
  • Small distribution size of 1Kb
  • Use fastest event types supported (majority of browsers has ~300ms delay between touch/pointer events and click). Every millisecond does really matter!

Installation

If you are using Bower:

bower install tap

For npm users:

npm install tapjs

Otherwise just download the library.

Include it anywhere in your html file (it does not matter where โ€” in <head> or not):

<script src="bower_components/tap/dist/tap.min.js"></script>

Usage

Using Tap is super easy. Just handle the 'tap' event in a way you are familiar with:

document.getElementById('any-element').addEventListener('tap', function (e) {
    // All the magic happens here
});

With jQuery

$('#any-element').on('tap', function (e) {
    // All the magic happens here
});

With Zepto

$('#any-element').on('tap', function (e) {
    // All the magic happens here
});

With Dojo

var myButton = dojo.byId('any-element');
dojo.connect(myButton, 'tap', function(e){
    // All the magic happens here
});

With YUI

YUI().use('event', 'node', function (Y) {
    Y.one('#any-element').on('tap', function(e) {
        // All the magic happens here
    });
});

With ExtJS

Ext.get('any-element').on('tap', function (e) {
    // All the magic happens here
});

With Meteor

First, install Meteor package:

meteor add jimbog:tap

Then, the tap event is used just like any other event in Meteor, here is an example for an anchor element:

Template.MyTemplate.events({
    'tap a': function(evt, tmpl){
        evt.preventDefault();
        console.log('you tapped the link');
    }
})

With Angular

Just add the code below or dist/tap.angular.js to your project, and use ng-tap insted of ng-click. Do not forget add ngTap as a dependency.

angular.module('ngTap', []).directive('ngTap', function() {
    return function(scope, element, attrs) {
        element.bind('tap', function() {
            scope.$apply(attrs['ngTap'], element);
        });
    };
});

With Knockout

tap is not in the list of known events for Knockout, so use custom event binding to handle tap event:

<button data-bind="event: {tap: onAddToCart}">Add to cart</button>

Browser Support

Tap was tested on the wide range of devices:

  • HTC T9295
  • iPhone 4, 5s
  • HTC Inspire 4G
  • Motorola Xoom
  • Nexus 4
  • Nexus 5
  • BlackBerry Bold 9800
  • Acer S7
  • Nokia Lumia 825
  • Nokia Lumia 800

And browsers:

  • Android Browser 2+
  • BlackBerry Browser 6+
  • Chrome 31+
  • Firefox for Android
  • Firefox 24+
  • IE 9+
  • Mobile Chrome
  • Mobile Safari 5+
  • Opera 12+
  • Opera Mini
  • Safari 5+

It doesn't mean that all other platforms and browsers (or older versions of them) are not supported.

LICENSE

Tap is distributed under MIT license. Enjoy!

Bitdeli Badge

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.