Namespace: Events:onSwipe

Events:onSwipe

Source:

Methods

onSwipe(targets, direction, handler, dimensionFactoropt, nullable, hasToBeTouchDeviceopt, nullable, eventNameSpaceopt, nullable) → {function}

Defines a handler for a swipe gesture on (an) element(s). Offers four swipe directions (up/right/down/left), where triggering the handler depends on the distance between touchstart and touchend in relation to the element's width or height, depending on the direction, multiplied by a factor to express a percentage.

You may also set this method to also fire upon mouse swipes, by setting "hasToBeTouchDevice" to false.

Parameters:
Name Type Attributes Default Description
targets EventTarget | Array.<EventTarget>

the target(s) to register event handlers on
direction String

the direction to bind => up/down/left/right
handler function

the callback to execute if the event(s) defined in events are being received on target
dimensionFactor Number <optional>
<nullable>
 0.2

to determine what registers as a swipe we use a percentage of the element's width/height, the touch has to move, default is 20%
hasToBeTouchDevice Boolean <optional>
<nullable>
 true

if true, makes sure the handlers are only active on touch devices, if false, also reacts to mouse swipes
eventNameSpace String <optional>
<nullable>
 'annex-swipe'

apply an event namespace, which identifies specific events, helpful for a specific unbind later using the same namespace
Source:
See:
Throws:

  • error in case no targets are defined

  • error in case unknown direction is defined

  • error in case handler is not a function

  • error in case targets are not all usable event targets

  • error in case delegations are missing viable ancestor targets

Returns:
remover function, which removes all handlers again, added by the current execution
Type
function
Example
onSwipe(slider, 'up', e => { e.currentTarget.fadeOut(); });
onSwipe(slider, 'right', () => { document.body.dispatchEvent(new CustomEvent('load-previous-thing')); }, 0.15, false, 'foobar-prev');