Detect Finger Swipe Events With JavaScript – swiped-events

Category: Javascript , Recommended | March 20, 2019
Author: john-doherty
Views Total: 2,828
Official Page: Go to website
Last Update: March 20, 2019
License: MIT

Preview:

Detect Finger Swipe Events With JavaScript – swiped-events

Description:

pure-swipe is a JavaScript-based swipe events detection library which 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:

03/20/2018

  • tweaks

02/02/2018

  • renamed to swiped-events

09/24/2018

  • Bugfix

05/26/2018

  • v1.0.0

You Might Be Interested In:


Leave a Reply