SleepWalker/swipe.js

jonaed1230 · 2020-03-13T17:45:35Z

Thanks a lot it saved my day.

AEsmerio · 2020-04-19T23:31:14Z

@IanRr thanks for that correction. @mocon thanks for tweak
It works fine now

let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;

const gestureZone = document.getElementById('modalContent');

gestureZone.addEventListener('touchstart', function(event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
}, false);

gestureZone.addEventListener('touchend', function(event) {
    touchendX = event.changedTouches[0].screenX;
    touchendY = event.changedTouches[0].screenY;
    handleGesture();
}, false); 

function handleGesture() {
    if (touchendX < touchstartX) {
        console.log('Swiped left');
    }
    
    if (touchendX > touchstartX) {
        console.log('Swiped right');
    }
    
    if (touchendY < touchstartY) {
        console.log('Swiped up');
    }
    
    if (touchendY > touchstartY) {
       console.log('Swiped down');
    }
    
    if (touchendY === touchstartY) {
       console.log('Tap');
    }
}

THanks, man. It was really helpfull

tryhardest · 2020-06-22T17:36:47Z

This is starting to look like one of the leading script threads on vanillaJS touch events. Seems like Hammer, Zing and Interactjs (pointer events) libs (interact excluded) are maybe become a bit obsolete except for drag, drop, and pointer support. Does anyone have any flushed out changes they have made since (as the thread goes back a few years)? Would be cool to keep this thread up to date with any changes or learnings. Anyone using this extensively with event listeners on touchMove? @evrenakar @tlacaelelrl @hperrin

vwebtech · 2020-07-08T08:20:42Z

Everything is wrong .

if you swipe UP , Down , or Left Right it will trigger the action.

because its not checking the direction.

Its just checking the one point to another point on screen, and it can not determine the direction.
i will share new code once i fix this.
Thanks.

Mapiac · 2020-07-21T02:06:10Z

What did you change @vwebtech ?

sekoyo · 2020-07-21T02:13:30Z

I guess he means it will trigger multiple conditions, you can check which direction has the most bias:

let startX = 0;
let startY = 0;

function handleTouchStart(e) {
  startX = e.changedTouches[0].screenX;
  startY = e.changedTouches[0].screenY;
}

function handleTouchEnd(e) {
  const diffX = e.changedTouches[0].screenX - startX;
  const diffY = e.changedTouches[0].screenY - startY;
  const ratioX = Math.abs(diffX / diffY);
  const ratioY = Math.abs(diffY / diffX);
  const absDiff = Math.abs(ratioX > ratioY ? diffX : diffY);

  // Ignore small movements.
  if (absDiff < 30) {
    return;
  }

  if (ratioX > ratioY) {
    if (diffX >= 0) {
      console.log('right swipe');
    } else {
      console.log('left swipe');
    }
  } else {
    if (diffY >= 0) {
      console.log('down swipe');
    } else {
      console.log('up swipe');
    }
  }
}

luc-sauvage · 2020-08-15T15:40:28Z

hello people, the 0 in the changedTouches property stands for the number of touches i guess, meaning the number of fingers needed to detect the event? please help, i cannot find proper answers online (Or at least answers i understand...)...
Thanks

hkkcngz · 2020-08-18T11:52:32Z

I guess he means it will trigger multiple conditions, you can check which direction has the most bias:

let startX = 0;
let startY = 0;

function handleTouchStart(e) {
  startX = e.changedTouches[0].screenX;
  startY = e.changedTouches[0].screenY;
}

function handleTouchEnd(e) {
  const diffX = e.changedTouches[0].screenX - startX;
  const diffY = e.changedTouches[0].screenY - startY;
  const ratioX = Math.abs(diffX / diffY);
  const ratioY = Math.abs(diffY / diffX);
  const absDiff = Math.abs(ratioX > ratioY ? diffX : diffY);

  // Ignore small movements.
  if (absDiff < 30) {
    return;
  }

  if (ratioX > ratioY) {
    if (diffX >= 0) {
      console.log('right swipe');
    } else {
      console.log('left swipe');
    }
  } else {
    if (diffY >= 0) {
      console.log('down swipe');
    } else {
      console.log('up swipe');
    }
  }
}

hello, I tried to use your answer and make simple func for that. Also want to make it for only swipe left. Any help?
I tried this and error.

function swipe(e) {
handleTouchStart(e);
handleTouchEnd(e);
}
let e = document.querySelector('.nbr');

swipe(e);

c4benn · 2020-11-23T14:04:13Z

I have a quite lengthy solution that handles touchstart, touchmove, and touchend events alone. ~100 lines of code (minus comments).
This solution also returns the amount of pixels swiped, useful for creating a carousel or a swipeable component.

The code is below, you can modify it and get rid of what you don't need.

//to check that it's the right direction.
    const log = x => console.log(x)

class RootSwipeable {
    //offset is amount of pixels swiped to be considered a direction.
    //else multiple directions might trigger at once.
    constructor({ offset }) { 
        this.offset = offset
        this.previous = { x: null, y: null } 
    }

    updatePrevious(e) {
        this.previous.x =  e.changedTouches[0].screenX
        this.previous.y =  e.changedTouches[0].screenY
    }

    init(e) {
         !this.previous.x && !this.previous.y 
             && this.updatePrevious(e);
    }

    handleGesture(e, {
      onLeft = () => { }, 
      onRight = () => { },
      onUp = () => { }, 
      onDown = () => { } }) 
  {
    let screenX =  e.changedTouches[0].screenX,
         screenY =  e.changedTouches[0].screenY;

    if (this.previous.x + this.offset < screenX) {
        log('right')
        this.updatePrevious(e)
        onRight()
        return
    }
    if (this.previous.x - this.offset > screenX) {
        log('left')
        this.updatePrevious(e)
        onLeft()
        return
    }
    if (this.previous.y + this.offset < screenY) {
        log('down')
        this.updatePrevious(e)
        onDown()
        return
    }
    if (this.previous.y - this.offset > screenY) {
        log('up')
        this.updatePrevious(e)
        onUp()
        return
    }
  }

  kill() { this.previous = { x: null, y: null } }
}

//edited "c7x43t's" code above...
//main method.
export default class Swipeable {
    constructor({ offset }) {
        this.root = new RootSwipeable({ offset })
        this.pageWidth = window.innerWidth || document.body.clientWidth
        this.threshold = Math.max(1, Math.floor(0.01 * (this.pageWidth)))
        this.touchstart = { x: 0, y: 0 }
        this.touchend = { x: 0, y: 0 }
        this.limit = Math.tan(45 * 1.5 / 180 * Math.PI)
    }

    touchStart(e) {
        root.init(e)
        this.touchstart.x = e.changedTouches[0].screenX
        this.touchstart.y = e.changedTouches[0].screenY
    }
    touchMove(e, {
        onLeft = () => { }, 
        onRight = () => { },
        onUp = () => { },
        onDown = () => { }
    }) {
        this.touchend.x = e.changedTouches[0].screenX;
        this.touchend.y = e.changedTouches[0].screenY;
        this.handleGesture(e, { onLeft, onRight, onUp, onDown })
    }

    handleGesture(e, { onLeft, onRight, onUp, onDown }) {
        let x = this.touchend.x - this.touchstart.x,
        y = this.touchend.y - this.touchstart.y;
    
        if (Math.abs(x) > this.threshold || Math.abs(y) > this.threshold) {
   
            root.handleGestures(e, {
               onUp: () => onUp(e, y),
               onRight: () => onRight(e, x),
               onDown: () => onDown(e, y),
               onLeft: () => onLeft(e, x)
            })

            //root.handleGestures() is the initial root class above.//
        }
    }

    touchEnd() {
        root.kill()
        this.touchstart = { x: 0, y: 0 }
        this.touchend = { x: 0, y: 0 }
    }
}

The module above will then be used as so

import Swipeable from '@file_location'

//offset is preferably a number >= 2 && <= 10.
const swipeable = new Swipeable({ offset: 2 })

//example component: carousel//
document.querySelector('.carousel').addEventListener('touchstart', e => swipeable.touchStart(e))
document.querySelector('.carousel').addEventListener('touchmove', e => {
    swipeable.touchMove(e, { onUp: (e, x) => console.log(e, x + 'px swiped') })
})
document.querySelector('.carousel').addEventListener('touchend', e => swipeable.touchEnd(e))

bcanedo4 · 2021-02-23T19:35:31Z

Works great, thanks!

hperrin · 2021-03-28T00:47:53Z

@tryhardest

This is starting to look like one of the leading script threads on vanillaJS touch events. Seems like Hammer, Zing and Interactjs (pointer events) libs (interact excluded) are maybe become a bit obsolete except for drag, drop, and pointer support. Does anyone have any flushed out changes they have made since (as the thread goes back a few years)? Would be cool to keep this thread up to date with any changes or learnings. Anyone using this extensively with event listeners on touchMove? @evrenakar @tlacaelelrl @hperrin

Despite not doing any work on it in a couple years, I still do maintain and use my version with the additional features I mentioned:
https://github.com/sciactive/tinygesture

god-s-perfect-idiot · 2021-05-23T07:16:36Z

For anyone still interesting, I just made a bit modified version to get swipe gesture controls on in-browser explorers.

 let touchstartX = 0;
    let touchstartY = 0;
    let touchendX = 0;
    let touchendY = 0;

    function handleGesture(touchstartX, touchstartY, touchendX, touchendY) {
        const delx = touchendX - touchstartX;
        const dely = touchendY - touchstartY;
        if(Math.abs(delx) > Math.abs(dely)){
            if(delx > 0) return "right"
            else return "left"
        }
        else if(Math.abs(delx) < Math.abs(dely)){
            if(dely > 0) return "down"
            else return "up"
        }
        else return "tap"
    }

 const gestureZone = document.getElementById('main');
    gestureZone.addEventListener('touchstart', function(event) {
        touchstartX = event.changedTouches[0].screenX;
        touchstartY = event.changedTouches[0].screenY;
    }, false);

    gestureZone.addEventListener('touchend', function(event) {
        touchendX = event.changedTouches[0].screenX;
        touchendY = event.changedTouches[0].screenY;
        alert(handleGesture(touchstartX, touchstartY, touchendX, touchendY))
    }, false);

The source thread requires ultra precise swipes

MondeLionel · 2021-09-02T19:09:31Z

@c4benn

Ohh, yes. Your solution is a acting up on FF but it is the most elegant. Will do more testing.

MiguelLaraDev · 2022-01-10T17:50:00Z

Thank you, works fine for me!

jonseo · 2022-06-15T16:07:44Z

Quick dumb question, how do you write a function to count the number of swipes to the left or right?

IanRr · 2022-06-22T18:12:30Z

@jonseo I'd probably just create a variable or variables outside of the addEventListener scope (so basically just at the top of the code) and then increment those inside the addEventListener function

lmk if that's too brief a description

jonseo · 2022-06-23T12:36:22Z

Yeh, thats a bit brief, can u point me to some code examples. much appreciated.

c4benni · 2022-06-23T13:32:29Z

@jonseo check this https://gist.github.com/SleepWalker/da5636b1abcbaff48c4d?permalink_comment_id=3537435#gistcomment-3537435

especially

document.querySelector('.carousel').addEventListener('touchmove', e => {
    swipeable.touchMove(e, { 
        onUp: (e, x) => console.log(e, x + 'px swiped') ,
        onLeft: (e, x) => console.log(e, x + 'px swiped')
    })
})

I hope that's what you mean

jonseo · 2022-06-23T17:20:33Z

thnk you!

wenlittleoil · 2023-11-09T03:14:48Z

Great, but still have questions about different browser compatibility issues.

	var touchstartX = 0;
	var touchstartY = 0;
	var touchendX = 0;
	var touchendY = 0;

	var gesuredZone = document.getElementById('gesuredZone');

	gesuredZone.addEventListener('touchstart', function(event) {
	touchstartX = event.screenX;
	touchstartY = event.screenY;
	}, false);

	gesuredZone.addEventListener('touchend', function(event) {
	touchendX = event.screenX;
	touchendY = event.screenY;
	handleGesure();
	}, false);

	function handleGesure() {
	var swiped = 'swiped: ';
	if (touchendX < touchstartX) {
	alert(swiped + 'left!');
	}
	if (touchendX > touchstartX) {
	alert(swiped + 'right!');
	}
	if (touchendY < touchstartY) {
	alert(swiped + 'down!');
	}
	if (touchendY > touchstartY) {
	alert(swiped + 'left!');
	}
	if (touchendY == touchstartY) {
	alert('tap!');
	}
	}

SleepWalker/swipe.js

jonaed1230 commented Mar 13, 2020

AEsmerio commented Apr 19, 2020

tryhardest commented Jun 22, 2020 •

edited

Loading

vwebtech commented Jul 8, 2020

Mapiac commented Jul 21, 2020

sekoyo commented Jul 21, 2020 •

edited

Loading

luc-sauvage commented Aug 15, 2020

hkkcngz commented Aug 18, 2020 •

edited

Loading

c4benn commented Nov 23, 2020 •

edited

Loading

bcanedo4 commented Feb 23, 2021

hperrin commented Mar 28, 2021

god-s-perfect-idiot commented May 23, 2021 •

edited

Loading

MondeLionel commented Sep 2, 2021

MiguelLaraDev commented Jan 10, 2022

jonseo commented Jun 15, 2022 •

edited

Loading

IanRr commented Jun 22, 2022

jonseo commented Jun 23, 2022

c4benni commented Jun 23, 2022

jonseo commented Jun 23, 2022

wenlittleoil commented Nov 9, 2023

SleepWalker/swipe.js

jonaed1230 commented Mar 13, 2020

AEsmerio commented Apr 19, 2020

tryhardest commented Jun 22, 2020 • edited Loading

vwebtech commented Jul 8, 2020

Mapiac commented Jul 21, 2020

sekoyo commented Jul 21, 2020 • edited Loading

luc-sauvage commented Aug 15, 2020

hkkcngz commented Aug 18, 2020 • edited Loading

c4benn commented Nov 23, 2020 • edited Loading

bcanedo4 commented Feb 23, 2021

hperrin commented Mar 28, 2021

god-s-perfect-idiot commented May 23, 2021 • edited Loading

MondeLionel commented Sep 2, 2021

MiguelLaraDev commented Jan 10, 2022

jonseo commented Jun 15, 2022 • edited Loading

IanRr commented Jun 22, 2022

jonseo commented Jun 23, 2022

c4benni commented Jun 23, 2022

jonseo commented Jun 23, 2022

wenlittleoil commented Nov 9, 2023

tryhardest commented Jun 22, 2020 •

edited

Loading

sekoyo commented Jul 21, 2020 •

edited

Loading

hkkcngz commented Aug 18, 2020 •

edited

Loading

c4benn commented Nov 23, 2020 •

edited

Loading

god-s-perfect-idiot commented May 23, 2021 •

edited

Loading

jonseo commented Jun 15, 2022 •

edited

Loading