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!'); | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
Actually, in this script, it should be : |
This comment has been minimized.
This comment has been minimized.
THX |
This comment has been minimized.
This comment has been minimized.
@SleepWalker also line 31 should be the 'up' direction |
This comment has been minimized.
This comment has been minimized.
Useless. |
This comment has been minimized.
This comment has been minimized.
Worked for me thanks! :) |
This comment has been minimized.
This comment has been minimized.
Thanks! I made some small tweaks to this, based on the comments above: let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;
const gestureZone = document.getElementById('gestureZone');
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');
}
} |
This comment has been minimized.
This comment has been minimized.
Thank you, it was very helpful! |
This comment has been minimized.
This comment has been minimized.
Thx! |
This comment has been minimized.
This comment has been minimized.
I have a different approach for the handleGesture ( does not include the tap though ) that works with the dimensions of the element that the events are occuring on ( because let's face it, users do not swipe in a straight line most of the time, and we should account for this )
|
This comment has been minimized.
This comment has been minimized.
@mocon heads up on your revisions if you haven't already noticed Seems to me that including using |
This comment has been minimized.
This comment has been minimized.
@IanRr thanks for that correction. @mocon thanks for tweak
|
This comment has been minimized.
This comment has been minimized.
Small modification of @stephenjude using angles (45° for each of the 8 directions) to determine the direction and a treshold of 1px or 1% of page width:
|
This comment has been minimized.
This comment has been minimized.
Like ! |
This comment has been minimized.
This comment has been minimized.
i add this script to npm npm link: github link: |
This comment has been minimized.
This comment has been minimized.
Hello , actually won't work on some Android Chrome newer versions... If someone could add browser interogation for Pointer Events and a solution for the it , would be our hero ! |
This comment has been minimized.
This comment has been minimized.
Idk... I tried to modify uxitten approach with Pointer Events ... If someone could write a more elegant version of this with pinch and multiple taps would be awesome ...
|
This comment has been minimized.
This comment has been minimized.
I took a shot at improving this too. I added multiple listeners support, long press, mouse support, velocity threshold, and customization. It's on NPM and GitHub: https://www.npmjs.com/package/tinygesture Here's a demo: Thank you @SleepWalker, @uxitten, @c7x43t. |
This comment has been minimized.
This comment has been minimized.
Thank you so much. |
This comment has been minimized.
This comment has been minimized.
Here I leave you some code I use, some of it was initially based on the code listed here, then modified to adjust to my needs and new events. TlakDev.EventHandler.prototype._defaults = {
touch: {
x: 0,
y: 0
},
touchEnd: {
x: 0,
y: 0
}
}
TlakDev.EventHandler.prototype.sendTouchEvent = function (event, element) {
let t = this;
switch(true){
case ((Math.abs(t.touch.x) - Math.abs(t.touchEnd.x)) === 0) && ((Math.abs(t.touch.y) - Math.abs(t.touchEnd.y)) === 0):
event.direction = "tap";
break;
case Math.abs(t.touch.x - t.touchEnd.x) > Math.abs(t.touch.y - t.touchEnd.y):
/*left/right*/
if(t.touch.x > t.touchEnd.x){
event.direction = "left";
} else {
event.direction = "right";
}
break;
default:
/*up/down*/
if(t.touch.y < t.touchEnd.y){
event.direction = "down";
} else {
event.direction = "up";
}
break;
}
switch(true){
case ((Math.abs(t.touch.x) - Math.abs(t.touchEnd.x)) === 0) && ((Math.abs(t.touch.y) - Math.abs(t.touchEnd.y)) === 0):
event.directionPrecision = "tap";
break;
case t.touch.x > t.touchEnd.x:
/*left*/
if(t.touch.y > t.touchEnd.y){
event.directionPrecision = "upLeft";
} else {
event.directionPrecision = "downLeft";
}
break;
default:
/*right*/
if(t.touch.y > t.touchEnd.y){
event.directionPrecision = "upRight";
} else {
event.directionPrecision = "downRight";
}
break;
}
/*
* Do whatever you need with the event/element
* The event contains 2 properties
* 1. direction = tap|left|right|up|down
* 2. directionPrecision tap|upRight|upLeft|downRight|downLeft
*/
}
TlakDev.EventHandler.prototype.setTouch = function (event) {
let e = {};
if(event.screenY){
e.x = event.screenX;
e.y = event.screenY;
} else if(typeof event.touches !== "undefined" && event.touches.length > 0){
e.x = event.touches[0].pageX;
e.y = event.touches[0].pageY;
} else if(typeof event.changedTouches !== "undefined" && event.changedTouches.length > 0) {
e.x = event.changedTouches[0].pageX;
e.y = event.changedTouches[0].pageY;
} else {
e.x = 0;
e.y = 0;
}
return e;
}
/*
@param nodes is an array of javascript elements to which apply the events
*/
TlakDev.EventHandler.prototype.handleSwipes = function (nodes) {
let t = this;
nodes.forEach(function(element){
element.addEventListener("touchstart", function (event) {
let e = t.setTouch(event);
t.touch = e;
});
element.addEventListener("touchend", function (event) {
let e = t.setTouch(event);
t.touchEnd = e;
t.sendTouchEvent(event, element);
});
});
} |
This comment has been minimized.
This comment has been minimized.
Function that only listen the y down event. `
` |
This comment has been minimized.
This comment has been minimized.
Thanks a lot ;) |
This comment has been minimized.
This comment has been minimized.
Thanks a lot it saved my day. |
This comment has been minimized.
This comment has been minimized.
THanks, man. It was really helpfull |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
What did you change @vwebtech ? |
This comment has been minimized.
This comment has been minimized.
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');
}
}
} |
This comment has been minimized.
This comment has been minimized.
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...)... |
This comment has been minimized.
This comment has been minimized.
hello, I tried to use your answer and make simple func for that. Also want to make it for only swipe left. Any help?
|
This comment has been minimized.
This comment has been minimized.
I have a quite lengthy solution that handles touchstart, touchmove, and touchend events alone. ~100 lines of code (minus comments). The code is below, you can modify it and get rid of what you don't need.
The module above will then be used as so
|
This comment has been minimized.
This comment has been minimized.
Works great, thanks! |
This comment has been minimized.
This comment has been minimized.
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: |
This comment has been minimized.
Hello,
This api event.screen does not work any more.
Change to
e.changedTouches[0].screenY;
ande.changedTouches[0].screenX;
Also line 31 should say up.