Super lightweight script ( ~1kB ) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.
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('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('swipeleft',function(e,data){});
$(elm).on('swiperight',function(e,data){});
$(elm).on('swipeup',function(e,data){});
$(elm).on('swipedown',function(e,data){});
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:
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:
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_TRESHOLD = 80, // default value
TAP_TRESHOLD = 200, // default value
TAP_PRECISION = 60; // default value (touch events boundaries)
</script>
<script src="path/to/Tocca.js"></script>
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.
- tap precision option included
dpltap
renameddbltap
- 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.