How to detect when a user swipes left or right.

[Durus]

Is there as why to bind or detect when the user has swiped left or right on the screen in JavaScript?

I have searched for the documentation it's either not in there or I totally missed it. 

I did look at the panorama component and it's not going to work for what I need. 

[EWR]

You don't have an event for swipe, but I think you can read the x position for mouse down and x position for mouse up and 'guess' the swipe direction. I would do something like

let myButton = document.getElementById("myButton");

myButton.onmousedown = function(evt) {
  console.log("Before swipe x position: " + evt.screenX);
}
myButton.onmouseup = function(evt) {
  console.log("After swipe x position: " + evt.screenX);
}

[EWR]

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[EWR]

You don't have an event for swipe, but I think you can read the x position for mouse down and x position for mouse up and 'guess' the swipe direction.
I would do something like :

let myButton = document.getElementById("myButton");

myButton.onmousedown = function(evt) {
  console.log("Before swipe x position: " + evt.screenX);
}
myButton.onmouseup = function(evt) {
  console.log("After swipe x position: " + evt.screenX);
}
 

 

[EWR]

I would do something like this trying to simulate a swipe event.
Compare the initial position of the x and the latest x position to know what way is the user swiping
let myButton = document.getElementById("myButton");

myButton.onmousedown = function(evt) {
  console.log("Before swipe x position: " + evt.screenX);
}
myButton.onmouseup = function(evt) {
  console.log("After swipe x position: " + evt.screenX);
}
 

 

[EWR]

I would try something like this to simulate the swipe:

let myButton = document.getElementById("myButton");

myButton.onmousedown = function(evt) {
  console.log("Mouse moved: " + evt.screenX);
}

myButton.onmouseup = function(evt) {
  console.log("Mouse moved: " + evt.screenX);
}

Try to compare the x before the move and after the move to get the direction.

[nsmet93]

did you manage to get the swipes to work? if so could you share how you did this? 

[EWR]

Hi, I would try something like this to simulate the swipe movement:

var myButton = document.getElementById("myButton");

myButton.onmousedown = function(evt) {
  console.log("Mouse moved: " + evt.screenX);
}

myButton.onmouseup = function(evt) {
  console.log("Mouse moved: " + evt.screenX);
}

And compare the results to see what direction the user swiped.

[Pietero · Accepted solution]

What i use in My app is pretty simple but it works

var y = 0;
var x=0;
var timerText = document.getElementById("timer");
timerText.onmousedown = function(evt) {
  y = evt.screenY;
  x = evt.screenX;
}
timerText.onmouseup = function(evt) {
  let yMove = evt.screenY-y;
  let xMove = evt.screenX-x;
  if (yMove< -60) {//swipe up  };

  if (yMove> 60) {//swipe down};

  if (xMove< -60) {//swipe left  };

  if (xMove> 60) {//swipe right};

 
}

[Durus]

Thanks for the responses I'm going to give a shot tonight.

[Durus]

@Pietero the onmousedown / onmouseup worked great. 

Thanks