Detect Finger Swipe Events With JavaScript – swiped-events

Preview:

Description:

pure-swipe is a JavaScript-based swipe events detection library that adds missing swiped-left, swiped-right, swiped-up and swiped-down events to the addEventListener() API.

How to use it:

Download and import the JavaScript file pure-swipe.js into the document.

<script src="src/pure-swipe.js"></script>

Specify the event types to listen for.

// swiped-left
document.addEventListener('swiped-left', function(e) {
  // ...
});
// swiped-right
document.addEventListener('swiped-right', function(e) {
  // ...
});
// swiped-up
document.addEventListener('swiped-up', function(e) {
  // ...
});
// swiped-down
document.addEventListener('swiped-down', function(e) {
  // ...
});

Customize the pure-swipe via HTML5 data attributes as follows:

• data-swipe-threshold: set how far the user must swipe before it is considered a swipe
• swipe-timeout: timeout in milliseconds
• ignore: disable the event detection on this element?

<div data-swipe-threshold="20"
     data-swipe-timeout="500"
     data-swipe-ignore="false">
     Swipe me
</div>

Changelog:

v1.2.0 (04/27/2024)

• Add TypeScript declarations

v1.1.9 (11/17/2023)

• Add touch count to event details

v1.1.7 (11/22/2021)

• Introduce vw and vh in addition to px as threshold units

v1.1.6 (10/09/2021)

• added new build

v1.1.3 (08/29/2020)

• Config attributes can now be added to parent elements

v1.1.0 (05/28/2020)

• updated module versions

03/20/2018

• tweaks

02/02/2018

• renamed to swiped-events

09/24/2018

• Bugfix

05/26/2018

• v1.0.0