Skip to main content

Callbacks

note

All Module callbacks are available in this class.

start

Swipe start event. See ISwipeCoords.

const observer = new Swipe({
container: document.getElementById('container'),
onStart: (coords) => console.log(coords),
});

or:

const destruct = observer.on('start', (coords) => console.log(coords));

// Cancel the callback
destruct();

move

Swipe move event. See ISwipeCoords.

const observer = new Swipe({
container: document.getElementById('container'),
onMove: (coords) => console.log(coords),
});

or:

const destruct = observer.on('move', (coords) => console.log(coords));

// Cancel the callback
destruct();

end

Swipe end event. See ISwipeCoords.

const observer = new Swipe({
container: document.getElementById('container'),
onEnd: (coords) => console.log(coords),
});

or:

const destruct = observer.on('end', (coords) => console.log(coords));

// Cancel the callback
destruct();

toTop

Swipe from bottom to top.

const observer = new Swipe({
container: document.getElementById('container'),
onToTop: () => console.log('from bottom to top'),
});

or:

const destruct = observer.on('toTop', () => console.log('from bottom to top'));

// Cancel the callback
destruct();

toBottom

Swipe from top to bottom.

const observer = new Swipe({
container: document.getElementById('container'),
onToBottom: () => console.log('from top to bottom'),
});

or:

const destruct = observer.on('toBottom', () =>
console.log('from top to bottom'),
);

// Cancel the callback
destruct();

toRight

Swipe from left to right.

const observer = new Swipe({
container: document.getElementById('container'),
onToRight: () => console.log('from left to right'),
});

or:

const destruct = observer.on('toRight', () =>
console.log('from left to right'),
);

// Cancel the callback
destruct();

toLeft

Swipe from right to left.

const observer = new Swipe({
container: document.getElementById('container'),
onToLeft: () => console.log('from right to left'),
});

or:

const destruct = observer.on('toLeft', () => console.log('from right to left'));

// Cancel the callback
destruct();

touchstart

Triggered on touchstart listener. Triggered before any action related to this event is processed.

const observer = new Swipe({
container: document.getElementById('container'),
onTouchstart: (event) => console.log(event),
});

or:

const destruct = observer.on('touchstart', (event) => console.log(event));

// Cancel the callback
destruct();

touchmove

Triggered on touchmove listener. Triggered before any action related to this event is processed.

const observer = new Swipe({
container: document.getElementById('container'),
onTouchmove: (event) => console.log(event),
});

or:

const destruct = observer.on('touchmove', (event) => console.log(event));

// Cancel the callback
destruct();

mousemove

Triggered on mousemove listener. Triggered before any action related to this event is processed.

const observer = new Swipe({
container: document.getElementById('container'),
onMousemove: (event) => console.log(event),
});

or:

const destruct = observer.on('mousemove', (event) => console.log(event));

// Cancel the callback
destruct();

pointerdown

Triggered on pointerdown listener.

const observer = new Swipe({
container: document.getElementById('container'),
onPointerdown: ({ event, pointer }) => console.log(event, pointer),
});

or:

const destruct = observer.on('pointerdown', ({ event, pointer }) =>
console.log(event, pointer),
);

// Cancel the callback
destruct();

pointermove

Triggered on pointermove listener.

const observer = new Swipe({
container: document.getElementById('container'),
onPointermove: ({ event, pointer }) => console.log(event, pointer),
});

or:

const destruct = observer.on('pointermove', ({ event, pointer }) =>
console.log(event, pointer),
);

// Cancel the callback
destruct();

pointerup

Triggered on pointerup listener.

const observer = new Swipe({
container: document.getElementById('container'),
onPointerup: ({ pointer }) => console.log(pointer),
});

or:

const destruct = observer.on('pointerup', ({ pointer }) =>
console.log(pointer),
);

// Cancel the callback
destruct();

abort

Triggered when swipe is aborted.

const observer = new Swipe({
container: document.getElementById('container'),
onAbort: () => console.log('swipe aborted'),
});

or:

const destruct = observer.on('abort', () => console.log('swipe aborted'));

// Cancel the callback
destruct();

preventEdgeSwipe

Triggered on edge swipe preventing.

const observer = new Swipe({
container: document.getElementById('container'),
onPreventEdgeSwipe: () => console.log('edge swipe prevented'),
});

or:

const destruct = observer.on('preventEdgeSwipe', () =>
console.log('edge swipe prevented'),
);

// Cancel the callback
destruct();

inertiaStart

Triggered on inertia start.

const observer = new Swipe({
container: document.getElementById('container'),
onInertiaStart: () => console.log('inertia start'),
});

or:

const destruct = observer.on('inertiaStart', () =>
console.log('inertia start'),
);

// Cancel the callback
destruct();

inertia

Triggered on inertia progress.

const observer = new Swipe({
container: document.getElementById('container'),
onInertia: () => console.log('inertia in progress'),
});

or:

const destruct = observer.on('inertia', () =>
console.log('inertia in progress'),
);

// Cancel the callback
destruct();

inertiaEnd

Triggered on inertia end.

const observer = new Swipe({
container: document.getElementById('container'),
onInertiaEnd: () => console.log('inertia end'),
});

or:

const destruct = observer.on('inertiaEnd', () => console.log('inertia end'));

// Cancel the callback
destruct();

inertiaFail

Triggered when inertia fails to start because of lack of momentum.

const observer = new Swipe({
container: document.getElementById('container'),
onInertiaFail: () => console.log('inertia fail'),
});

or:

const destruct = observer.on('inertiaFail', () => console.log('inertia fail'));

// Cancel the callback
destruct();

inertiaCancel

Triggered when inertia is canceled.

const observer = new Swipe({
container: document.getElementById('container'),
onInertiaCancel: () => console.log('inertia cancel'),
});

or:

const destruct = observer.on('inertiaCancel', () =>
console.log('inertia cancel'),
);

// Cancel the callback
destruct();