Javascript touchstart根本不工作

Question

我试图在我的代码中做一个滑动动作，但是touchstart没有被初始化。我尝试在stackoverflow中搜索解决方案，但没有找到任何解决方案。我是一个使用js的新手。链接如下：

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";
});

‘请帮帮忙。此外，如果有任何替代使用触摸来实现卷帘，请务必告知。我不能使用jquery来做同样的事情，因为我必须在reactjs中复制它。提前谢谢。

Answer 1

我已经更详细地研究了你的代码。

1)假设您的浏览器处于正确模式，则所有事件都应被触发。您可以通过将控制台日志添加到相应的处理程序来轻松查看。

    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);

您应该会在日志中看到这两个条目：

事件开始

事件开始完成95 51

2)现在，在您的代码中不起作用的是touchmove处理程序中的以下行：

window.scrollBy(0, dist);

您的窗口中没有溢出内容，因此没有什么可滚动到的。你的“.nav”块的内容比屏幕宽，它的样式是为了隐藏溢出，它的宽度:100%仅将其调整为窗口宽度，但任何溢出的内容仍被隐藏。

在这一点上，我只能猜测预期的设计，但如果您将window.scrollBy更改为以下代码：

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

如果事件正在触发，您应该会在菜单中看到一些移动。在这段代码中，我将滚动偏移量直接应用于.nav元素，该元素包含大量内容。

3)我不使用reactjs，所以我不能特别推荐任何库。但通常情况下，自己实现swipe是您通常想要避免的事情。我相信在谷歌上搜索"reactjs swipe“会产生一些值得探索的点击量。