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
$ npm install tocca$ bower install Tocca.js -save
Include the script into your page:
<script src="path/to/Tocca.js"></script>Once you have included Tocca.js you will be able to catch all the new events:
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:
$(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!
<div ontap="function(e){})"></div>
<div ondbltap="function(e){})"></div>
<div onlongtap="function(e){})"></div>
<div onswipeleft="function(e){})"></div>
<div onswiperight="function(e){})"></div>
<div onswipeup="function(e){})"></div>
<div onswipedown="function(e){})"></div>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 eventy{ Int }: latest y position of pointer at the end of the eventoriginalEvent{ Object }: the original javascript native event that has been triggereddistance: this property is available only for the swipe eventsx{ Int }: the x absolute difference between the beginning and the end of the swipe gesturey{ Int }: the y absolute difference between the beginning and the end of the swipe gesture
Examples:
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:
touchmovetouchstarttouchendtouchcancel
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:
elm.addEventListener('touchmove',function(e){e.preventDefault()});
elm.addEventListener('touchstart',function(e){e.preventDefault()});
elm.addEventListener('touchend',function(e){e.preventDefault()});Whenever you want to configure the plugin events settings you can do that simply specifying two constants before including Tocca.js into the page
<script>
var SWIPE_THRESHOLD = 100, // default value
DBL_TAP_THRESHOLD = 200, // range of time in which a dbltap event could be detected,
LONG_TAP_THRESHOLD = 1000, // range of time after which a longtap event could be detected
TAP_THRESHOLD = 150, // range of time in which a tap event could be detected
TAP_PRECISION = 60 / 2, // default value (touch events boundaries)
JUST_ON_TOUCH_DEVICES = false, // default value ( decide whether you want to use the Tocca.js events only on the touch devices )
IGNORE_JQUERY = false; // default value ( will not use jQuery events, even if jQuery is detected )
</script>
<script src="path/to/Tocca.js"></script>In Tocca.js 1.1.0 you can also configure/get the internal options via function:
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 optionsActually 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.
- fixed: removed
constvariables
- fixed: 70
- fixed: 69
- update: improve multiple touches events detection
- fixed: #65
- fixed: #62
- fixed: #51 #54
- fixed: the PointerUp event is not always dispatched on Chrome and Android devices, prioritize always the
touch*overpointer*events
- fixed: #47
- fixed: #44
- added: support for the new
pointerevents
- added: the possibility to configure via function the internal tocca options
- added: the
IGNORE_JQUERYoption
- fixed: #37
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
- added:
longtapevent and theLONG_TAP_THRESHOLDvariable - fixed: inconsistencies and issues across the hybrid devices
- added:
longtapevent and theLONG_TAP_THRESHOLDvariable
- added: support for the inline events
- fixed:
dbltap#16 - updated: node devDependecies updated
- fixed:
dbltapissue #14
- updated: no more deferred
tapevents, atapevent gets triggered immediately if it's in theTAP_THRESHOLDtime range - updated: a
tapevent will always come first adbltapevent
- updated: better and faster tap events detection
- updated: node devDependecies updated
- added: DBL_TAP_THRESHOLD option
- bugfix: optimizing the support for the microsoft hybrid devices (IE10/IE11)
- 'touchcancel' event removed to fix and android issue on page scroll
- nothing important (just a workaround to fix the tests on the motherfucker Phantomjs)
- bugfix: do not set the mouse event listeners on any touch device and vice versa
- added: new JUST_ON_TOUCH_DEVICES option to block all the Tocca.js events on the no-touch devices
- tap precision option included
dpltaprenameddbltap- new demo added demo-fun.html
- Tests added
- Android Bug fix
'Tocca' is the second person singular of the imperative Italian verb 'Toccare' that means to touch.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent