Awesome Open Source
Awesome Open Source

GitHub release GitHub issues GitHub last commit Github file size Build Status npm npm Analytics


Super tiny vanilla JS module to detect swipe direction and trigger custom events accordingly.


npm i touchsweep


yarn add touchsweep


just download this repository and use the files located in dist folder

or include it from

<script src=""></script>


import TouchSweep from 'touchsweep';

const area = document.getElementById('swipe-area');
const data = {
	value: 1
const touchThreshold = 20;

const touchSwipeInstance = new TouchSweep(area, data, touchThreshold);

// Then listen for custom swipe events and do your magic:

area.addEventListener('swipeleft', event => {
	// You have swiped left
	// Custom event data is located in event.detail

area.addEventListener('swiperight', event => {
	// You have swiped right
	// Custom event data is located in event.detail

area.addEventListener('swipedown', event => {
	// You have swiped down
	// Custom event data is located in event.detail

area.addEventListener('swipeup', event => {
	// You have swiped up
	// Custom event data is located in event.detail

area.addEventListener('tap', event => {
	// You have tapped
	// Custom event data is located in event.detail

Options and default settings

The module constructor accepts three (3) arguments:

  • element: A HTML Element. Default is document.body
  • eventData: A plain JS object. Default is {}
  • threshold: How many pixels to count until an event is fired. Default is 40


TouchSweep provides a minimal API for you to use.

The TouchSwipe instance exposes two public methods which allow you to add or to remove all event listeners responsible for the module functionality.

This is useful in cases where you want to remove the TouchSwipe container/area from the DOM and prevent possible memory leaks by removing all event listeners related to this DOM element.

In order to remove all previously attached event listeners:


In order to add all previously removed event listeners:


Supported Browsers

Currently all evergreen browsers are supported.


There is a simple demo illustrating how the TouchSweep library works.

Check it out here

Support this project

Tweet Donate Become a Patron



Alternatives To Touchsweep
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,074,350
Swipe (2,623
Swipe Gestures (145
Custom Events (15