Javascript touchstart not working at all

Question

I have tried to make a swipe movement in my code and the touchstart is not getting initialized. I tried searching in stackoverflow for a solution, couln't find any. I am a newbie in using js. Here is the link :

Sample

window.addEventListener('load', function(){

var box1 = document.querySelector('.nav');
var startx = 0;
var starty = 0;
var dist = 0;
var endx=0;
var endy=0;

box1.addEventListener('touchstart', function(e){
    var touchobj = e.changedTouches[0]; 
    startx = parseInt(touchobj.clientX); 


starty = parseInt(touchobj.clientY); 
    }, false);

box1.addEventListener('touchmove', function(e){
  e.preventDefault();
    var touchobj = e.changedTouches[0]; 
    endx = parseInt(touchobj.clientX);
    endy = parseInt(touchobj.clientY);
let dist = endy - starty;
   window.scrollBy(0, dist);
}, false);

box1.addEventListener('touchend', function(e){
    var touchobj = e.changedTouches[0]; 
   endx = parseInt(touchobj.clientX);
    endy = parseInt(touchobj.clientY);
}, false);


}, false);

document.getElementById("btn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});

` Please help. Also, if there are any alternatives to using touch for implementing swipe, do tell. I cannot use jquery for the same, because I have to replicate it in reactjs. Thanks in advance.

Answer 1

I've taken look at your code in more details.

1) Providing that your browser is in correct mode, all the events should be triggering. You can check it easily by adding a console log to the corresponding handler.

    box1.addEventListener('touchstart', function(e){
        console.log("event start")
        var touchobj = e.changedTouches[0]; 
        startx = parseInt(touchobj.clientX); 
        starty = parseInt(touchobj.clientY); 
        console.log("event start done", startx,starty)
    }, false);

You should see both entries on the log:

event start

event start done 95 51

2) Now what is not working in your code is the following line in you touchmove handler:

window.scrollBy(0, dist);

You window is not overflowing with the content, so there is nothing to scroll to. Your '.nav' block, content of which is wider then the screen, is styled to hide the overflow, and its width:100% only sizes it to the window width, but any overflowing content is still hidden.

At this point I can only guess what was the intended design, but if you change window.scrollBy to the following code:

  var el = document.getElementsByClassName("nav")[0];
  el.scrollLeft = el.scrollLeft - dist;

You should see some movement in the menu, if events are triggering. In this code I am applying the scroll offset directly to the .nav element, that has hosts the wide content.

3) I don't use reactjs so I cannot recommend any library in particular. But in general, implementing swipe yourself is something you typically want to avoid. I am sure googling for "reactjs swipe" will produce some hits to explore.