Javascript touchstart根本不工作

2024年1月14日 184次阅读

我试图在我的代码中进行滑动移动,并且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中复制它.
提前致谢.

  最佳答案   我已经更详细地看了你的代码.
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”块(其内容比屏幕宽)的样式设置为隐藏溢出,其宽度：100％仅将其调整为窗口宽度,但任何溢出的内容仍然隐藏.
此时我只能猜到预期的设计是什么,但是如果你将window.scrollBy更改为以下代码：
  var el = document.getElementsByClassName("nav")[0];
  el.scrollLeft = el.scrollLeft - dist;

如果事件正在触发,您应该在菜单中看到一些动作.在这段代码中,我将滚动偏移直接应用于.nav元素,该元素具有广泛的内容.
3)我不使用reactjs所以我不能特别推荐任何库.但总的来说,实现自己滑动是你通常想要避免的事情.我肯定谷歌上搜索“reactjs swipe”会产生一些点击探索.
点赞