Super lightweight script (1kb) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.
npm install toccaTocca.js
========
[![Build Status][travis-image]][travis-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![MIT License][license-image]][license-url]
Super lightweight script ( ~1kB ) to detect via Javascript events like 'tap' 'longtap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.
If this project helped getting your job done consider making a donation for all the time I spend to bring it to you
[![Donate][donate-image]][paypal-link]
bash
$ npm install tocca
`$3
$ bower install Tocca.js -save
Usage
Include the script into your page:
html
`Once you have included Tocca.js you will be able to catch all the new events:
javascript
elm.addEventListener('tap',function(e){});
elm.addEventListener('dbltap',function(e){});
elm.addEventListener('longtap',function(e){});
elm.addEventListener('swipeleft',function(e){});
elm.addEventListener('swiperight',function(e){});
elm.addEventListener('swipeup',function(e){});
elm.addEventListener('swipedown',function(e){});
`It works with jQuery as well:
javascript
$(elm).on('tap',function(e,data){});
$(elm).on('dbltap',function(e,data){});
$(elm).on('longtap',function(e,data){});
$(elm).on('swipeleft',function(e,data){});
$(elm).on('swiperight',function(e,data){});
$(elm).on('swipeup',function(e,data){});
$(elm).on('swipedown',function(e,data){});
`Tocca.js supports also the inline events if you are using Riot.js!
html
`API and Examples
Anytime you will use a Tocca.js event the callback function will receive a special event object containing the following properties
- x { Int }: latest x position of pointer at the end of the event
- y { Int }: latest y position of pointer at the end of the event
- originalEvent { Object }: the original javascript native event that has been triggered
- distance: this property is available only for the swipe events
- x { Int }: the x absolute difference between the beginning and the end of the swipe gesture
- y { Int }: the y absolute difference between the beginning and the end of the swipe gesture
Examples:
javascript
elm.addEventListener('dbltap',function (e){
console.log(e.x);
console.log(e.y);
});
elm.addEventListener('swipeup',function (e){
console.log(e.x);
console.log(e.y);
console.log(e.distance.x);
console.log(e.distance.y);
});// with jQuery
$(elm).on('dbltap',function (e,data){
console.log(data.x);
console.log(data.y);
});
$(elm).on('swipeup',function (e,data){
console.log(data.x);
console.log(data.y);
console.log(data.distance.x);
console.log(data.distance.y);
});
`
Anyway you can combine Tocca.js with the default javascript touch events:
- touchmove
- touchstart
- touchend
- touchcancel
To disable the default touch behaviours (zoom on double tap, scroll on swipe...) on a certain element via javascript you can always use the following snippet:
javascript
elm.addEventListener('touchmove',function(e){e.preventDefault()});
elm.addEventListener('touchstart',function(e){e.preventDefault()});
elm.addEventListener('touchend',function(e){e.preventDefault()});
`
Configuration
Whenever you want to configure the plugin events settings you can do that simply specifying two constants before including Tocca.js into the page
html
`In Tocca.js 1.1.0 you can also configure/get the internal options via function:
js
window.tocca({
useJquery: your new option
swipeThreshold: your new option
tapThreshold: your new option
dbltapThreshold: your new option
longtapThreshold: your new option
tapPrecision: your new option
justTouchEvents: your new option
})console.log(window.tocca()) // will always return the current internal options
`Browser Support
Actually the script has been tested on all the modern browsers but it need a better testing phase over several platforms: Chrome 29+ Firefox 23+ Opera 12+ Safari 5+
It works on mobile/tablet browsers and on desktop browsers as well.
On the old browsers all the Tocca.js events cannot be triggered.
Changelog
$3
- fixed: removed
variables$3
- fixed: 70
$3
- fixed: 69
$3
- update: improve multiple touches events detection
$3
- fixed: #65
$3
- fixed: #62
$3
- fixed: #51 #54
- fixed: the PointerUp event is not always dispatched on Chrome and Android devices, prioritize always the
touch over pointer events
$3
- fixed: https://github.com/GianlucaGuarini/Tocca.js/issues/47
$3
- fixed: https://github.com/GianlucaGuarini/Tocca.js/issues/44
- added: support for the new
pointerevents$3
- added: the possibility to configure via function the internal tocca options
- added: the
option$3
- fixed: https://github.com/GianlucaGuarini/Tocca.js/issues/37
$3
Thanks to @AndyOGo for his help on this release- fixed: #34 #35
- fixed: more reliable and performant events on the hybrid devices
- fixed: multiple events dispatched on
tap$3
- added: event and the LONG_TAP_THRESHOLD variable
- fixed: inconsistencies and issues across the hybrid devices$3
- added: longtap event and the LONG_TAP_THRESHOLD variable$3
- added: support for the inline events$3
- fixed: dbltap https://github.com/GianlucaGuarini/Tocca.js/pull/16
- updated: node devDependecies updated$3
- fixed: dbltap issue https://github.com/GianlucaGuarini/Tocca.js/issues/14$3
- updated: no more deferred tap events, a tap event gets triggered immediately if it's in the TAP_THRESHOLD time range
- updated: a tap event will always come first a dbltap` eventdpltap renamed dbltap'Tocca' is the second person singular of the imperative Italian verb 'Toccare' that means to touch.
[npm-url]: https://npmjs.org/package/tocca
[npm-version-image]: http://img.shields.io/npm/v/tocca.svg?style=flat-square
[npm-downloads-image]: http://img.shields.io/npm/dm/tocca.svg?style=flat-square
[paypal-link]:https://www.paypal.me/GianlucaGuarini
[donate-image]:https://img.shields.io/badge/donate-%E2%9D%A4-brightgreen.svg?style=flat-square
[travis-url]:https://travis-ci.org/GianlucaGuarini/Tocca.js
[travis-image]: https://img.shields.io/travis/GianlucaGuarini/Tocca.js.svg?style=flat-square
[license-url]: LICENSE
[license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square