我试图在我的代码中进行滑动移动,并且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中复制它.
提前致谢.
最佳答案 我已经更详细地看了你的代码.
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”会产生一些点击探索.