pukhalski / Tap
Licence: mit
1Kb library for easy unified handling of user interactions such as mouse, touch and pointer events.
Stars: ✭ 541
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Tap
Hover On Touch
A pure Javascript Plugin for an alternative hover function that works on mobile and desktop devices. It triggers a hover css class on »Taphold« and goes to a possible link on »Tap«. It works with all html elements.
Stars: ✭ 256 (-52.68%)
Mutual labels: tap, touch, touch-events
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+5356.38%)
Mutual labels: touch, touch-events
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+472.46%)
Mutual labels: touch, touch-events
React Cursor Position
A React component that decorates its children with mouse and touch coordinates relative to itself.
Stars: ✭ 136 (-74.86%)
Mutual labels: tap, touch
gestures
A library for normalized events and gesture for desktop and mobile.
Stars: ✭ 31 (-94.27%)
Mutual labels: tap, touch
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-78.37%)
Mutual labels: touch, touch-events
react-fastclick
A react component that triggers click events for taps (short localized touches)
Stars: ✭ 20 (-96.3%)
Mutual labels: tap, touch
getting-touchy-presentation
Everything you (n)ever wanted to know about touch and pointer events
Stars: ✭ 42 (-92.24%)
Mutual labels: touch, touch-events
Creepyface
A JavaScript library that makes your face follow the pointer. 🤪🖱️👆
Stars: ✭ 412 (-23.84%)
Mutual labels: touch, touch-events
Vue Gallery
📷 Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Stars: ✭ 405 (-25.14%)
Mutual labels: touch
Widgetcase
自定义控件模块库：各种风格的自定义控件，拿来就用，API文档详细，持续集成，长期维护，有问必答；
Stars: ✭ 440 (-18.67%)
Mutual labels: touch
React Native Swipe Gestures
4-directional swipe gestures for react-native
Stars: ✭ 471 (-12.94%)
Mutual labels: touch
Handyswift
Handy Swift features that didn't make it into the Swift standard library.
Stars: ✭ 403 (-25.51%)
Mutual labels: delay
Pull To Reload
Pull to reload implementation for the web. Designed to work with both mobile and websites.
Stars: ✭ 396 (-26.8%)
Mutual labels: touch
Ava
Node.js test runner that lets you develop with confidence 🚀
Stars: ✭ 19,458 (+3496.67%)
Mutual labels: tap
Homebrew Bundle
📦 Bundler for non-Ruby dependencies from Homebrew, Homebrew Cask and the Mac App Store.
Stars: ✭ 3,940 (+628.28%)
Mutual labels: tap
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,
Taphandles 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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].