Claw
A very small gesture recognizer.
demo
setup
npm
npm i @seregpie/clawES module
import Claw from '@seregpie/claw';browser
<script src="https://unpkg.com/@seregpie/claw"></script>The module is globally available as Claw.
members
constructor
new Claw(target)
| argument | description |
|---|---|
target |
A DOM element as the target. |
let element = document.getElementById('claw');
let claw = (new Claw(element))
.on('panStart', event => {
// handle
})
.on('pan', event => {
// handle
})
.on('panEnd', event => {
// handle
});instance methods
.on(type, listener)
Binds a listener to an event type.
| argument | description |
|---|---|
type |
A string as the event type. |
listener |
A function as the event listener. |
Returns the instance to allow chaining.
claw.on('tap', event => {
// handle tap event
});.off(type, listener)
Unbinds a listener from an event type.
Omit the argument listener to unbind all listeners from an event type.
Omit the argument type to unbind all listeners from all event types.
| argument | description |
|---|---|
type |
A string as the event type. |
listener |
A function as the event listener. |
Returns the instance to allow chaining.
let tapListener = ((event => {
// handle tap event
claw.off('tap', tapListener);
});
claw.on('tap', tapListener);instance properties
.idle
read-only
Is true, if there are no bound listeners.
events
holdStart
{
pointerType,
timeStamp,
x,
y,
}holdEnd
{
pointerType,
initialTimeStamp,
timeStamp,
x,
y,
}panStart
{
pointerType,
timeStamp,
x,
y,
}pan
{
pointerType,
initialTimeStamp,
initialX,
initialY,
previousTimeStamp,
previousX,
previousY,
timeStamp,
x,
y,
}panEnd
{
pointerType,
initialTimeStamp,
initialX,
initialY,
timeStamp,
x,
y,
}tap
{
pointerType,
timeStamp,
x,
y,
}