Javascript touchstart 根本不起作用

Question

我已尝试在我的代码中进行滑动操作，但 touchstart 未初始化。我尝试在 stackoverflow 中搜索解决方案，但找不到任何解决方案。我是使用js的新手。这是链接:

Sample

window.addEventListener('load', function(){<p></p>

<pre><code>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); 
</code></pre>

<p>starty = parseInt(touchobj.clientY); 
    }, false);</p>

<pre><code>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);
</code></pre>

<p>}, false);</p>

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

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

event start

event start done 95 51

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

window.scrollBy(0, dist);

您的窗口没有内容溢出，因此没有可滚动到的内容。您的“.nav” block 的内容比屏幕宽，其样式设置为 overflow hidden ，其 width:100% 仅将其调整为窗口宽度，但仍然隐藏任何溢出的内容。

此时我只能猜测预期的设计是什么，但是如果您将 window.scrollBy 更改为以下代码:

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

如果事件正在触发，您应该会在菜单中看到一些移动。在此代码中，我将滚动偏移量直接应用于 .nav 元素，该元素承载了广泛的内容。

3) 我不使用 reactjs，所以我不能特别推荐任何库。但总的来说，您通常希望避免自己实现滑动。我确信在谷歌上搜索“reactjs swipe”会产生一些值得探索的结果。