swiped-events
A 0.7k script that adds swiped-left, swiped-right, swiped-up and swiped-down events to the DOM using CustomEvent and pure JS. Based on the StackOverflow thread Detect a finger swipe through JavaScript on the iPhone and Android
Usage
Add swiped-events.min.js to your page and start listening for swipe events. Events bubble, so you can addEventListener at document level, or on individual elements.
swiped
document.addEventListener('swiped', function(e) {
console.log(e.target); // element that was swiped
console.log(e.detail); // see event data below
console.log(e.detail.dir); // swipe direction
});
swiped-left
document.addEventListener('swiped-left', function(e) {
console.log(e.target); // element that was swiped
console.log(e.detail); // see event data below
});
swiped-right
document.addEventListener('swiped-right', function(e) {
console.log(e.target); // element that was swiped
console.log(e.detail); // see event data below
});
swiped-up
document.addEventListener('swiped-up', function(e) {
console.log(e.target); // element that was swiped
console.log(e.detail); // see event data below
});
swiped-down
document.addEventListener('swiped-down', function(e) {
console.log(e.target); // element that was swiped
console.log(e.detail); // see event data below
});
event data
The following event data is included with every event and accessible via e.detail
{
dir: 'up', // swipe direction (up,down,left,right)
touchType: 'direct', // touch type (stylus,direct) - stylus=apple pencil and direct=finger
xStart: 196, // x coords of swipe start
xEnd: 230, // x coords of swipe end
yStart: 196, // y coords of swipe start
yEnd: 4 // y coords of swipe end
}
Configure
You can optionally configure how swiped-events works using the following HTML attributes:
| Attribute | Description | Type | Default |
|---|---|---|---|
data-swipe-threshold |
Number of pixels a user must move before swipe fires | integer | 20 |
data-swipe-timeout |
Number of milliseconds from touchstart to touchend |
integer | 500 |
data-swipe-ignore |
If true, swipe events on this element are ignored | boolean | false |
If you do not provide any attributes, it assumes the following:
<div data-swipe-threshold="20"
data-swipe-timeout="500"
data-swipe-ignore="false">
Swiper, get swiping!
</div>
To set defaults application wide, set config attributes on a parent/topmost element:
<body data-swipe-threshold="100" data-swipe-timeout="250">
<div>Swipe me</div>
<div>or me</div>
</body>
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
Development
The project includes everything needed to tweak, including a node webserver. Run the following, then visit http://localhost:8080 in your browser.
You can test on a desktop using Device Mode in Google Chrome.
git clone https://github.com/john-doherty/swiped-events
cd swiped-events
npm install
npm start
Update .min files
To create a new version of the minified swiped-events.min.js file from source, tweak the version number in package.json and run the following:
npm run build
Star the repo
If you find this useful, please star the repo. It helps me priorities which OSS issues to tackle first
History
For change-log, check releases.
License
Licensed under MIT License © John Doherty
5 Apr 7, 2021
10 Oct 3, 2022
6 Dec 20, 2022
3 Nov 21, 2022
14 Dec 16, 2022
28 Dec 13, 2022
736 Jan 4, 2023
6 Aug 20, 2022
1.1k Dec 20, 2022
7 May 10, 2022
1 Mar 21, 2021
61 Jan 7, 2023
3 Mar 29, 2022
7 May 29, 2022
9 Jul 5, 2022
28 Oct 17, 2022
8 Sep 8, 2022
181 Dec 22, 2022
4 May 16, 2022