Question

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

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

您的窗口没有溢出内容，因此无需滚动到任何内容。你的＆＃39; .nav＆＃39;阻止，其内容比屏幕宽，设置为隐藏溢出，其宽度：100％仅将其调整为窗口宽度，但任何溢出内容仍然隐藏。

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

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

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

3）我没有使用reactjs所以我不能特别推荐任何库。但总的来说，实现自己滑动是你通常想要避免的事情。我确信谷歌搜索＆＃34; reactjs刷卡＆＃34;会产生一些点击探索。

Javascript touchstart根本不工作

1 个答案: