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.

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.

• javascript

• Does your code work? What is the problem you are having? – Martin Gottweis Commented Nov 22, 2016 at 8:09
• If you are using PC for testing, Do you have touch emulation enabled in chrome/whatever browser you are using? – Vladimir M Commented Nov 22, 2016 at 8:20
• personally remend labs.rampinteractive.co.uk/touchSwipe/demos/index.html touchSwipe for its events, not sure how it goes connecting to react though – haxxxton Commented Nov 22, 2016 at 8:21
• @MartinGottweis Hi, no my code is not working. Given, many browsers are now not allowing touchstart to be initialized, my hands are tied. I am new in this field and am at no wits to see what to do. The problem is that the swipe is not happening. Please click on the word Sample. It will take you to my pen code. Thanks. – Apoorva Commented Nov 22, 2016 at 13:42
• @VladimirM Yes, I have emulation enabled in the browser(chrome) I am using. – Apoorva Commented Nov 22, 2016 at 13:43

1 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 remend 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.