Super lightweight script (1kb) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.
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 gestureExamples:
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:
touchmovetouchstarttouchendtouchcancelTo 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 options
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.
const variablestouch* over pointer* eventspointereventsIGNORE_JQUERY optionThanks to @AndyOGo for his help on this release
taplongtap event and the LONG_TAP_THRESHOLD variablelongtap event and the LONG_TAP_THRESHOLD variabledbltap https://github.com/GianlucaGuarini/Tocca.js/pull/16dbltap issue https://github.com/GianlucaGuarini/Tocca.js/issues/14tap events, a tap event gets triggered immediately if it's in the TAP_THRESHOLD time rangetap 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.
FAQs
Super lightweight script (1kb) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.
The npm package tocca receives a total of 5,138 weekly downloads. As such, tocca popularity was classified as popular.
We found that tocca demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.