tap事件的奇葩问题

[chen_2016_web]

先看看我写的tap事件：

      let startTime = 0,isMove = false;
      navList.forEach((v,k)=>{
               v.addEventListener('touchstart',function(){
                         startTime = Date.now();
                })
                v.addEventListener('touchmove',function(){
                         isMove = true;
               })
              v.addEventListener('touchend',function(){
                      if(!isMove && (Date.now()-startTime)<130){
                            document.body.scrollTop = document.documentElement.scrollTop = 3500;
                           //document.body.scrollTop = document.documentElement.scrollTop = OFFSET(classfiyBox[k]).top-50;
                     }
                     startTime = 0;
                     isMove = false;
             })
        })

注释部分，就不用管了，我是想实现某效果的。
有一个很奇葩的问题，我并没有给触发tap事件的元素，添加a标签，但是每次我点击这些元素的时候，就会自动回到顶部，并且添加一个恶心的#井号。如果不使用document.body.scrollTop = document.documentElement.scrollTop那就不会有这个问题。反正，这是我今年遇见最奇葩的问题了.......我想求解，有何方法解决？
还有，我原以为是我的tap写错了。但是，我引用了hammer.js，使用tap，出现了同样的问题。
最后的时候，我把tap换成click事件，结果就好了，但是我们知道，使用click事件开发移动端，会有bug！
所以说，究竟是document.body.scrollTop = document.documentElement.scrollTop出问题了？还是tap出问题了？求解。

[天际的海浪]

是没有用a元素，也没有表单提交对吧。 事件中加 event.preventDefault() 试下。 这两个最好是分开赋值 document.documentElement.scrollTop = 3500; document.body.scrollTop = 3500;

[chen_2016_web]

引用 1 楼 jslang 的回复:

是没有用a元素，也没有表单提交对吧。 事件中加 event.preventDefault() 试下。 这两个最好是分开赋值 document.documentElement.scrollTop = 3500; document.body.scrollTop = 3500;

都试了，不行。不是表单，是导航。

[chen_2016_web]

引用 1 楼 jslang 的回复:

是没有用a元素，也没有表单提交对吧。 事件中加 event.preventDefault() 试下。 这两个最好是分开赋值 document.documentElement.scrollTop = 3500; document.body.scrollTop = 3500;

看楼下，我给你一个相对比较完整的代码。

[chen_2016_web]

     <nav id="c-nav" class="container" style="background-color: rgb(130, 57, 149);">
        <div class="festival-nav">
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <p class="item">
                            <img src="/src/assets/images/home/swipe/xn/p-glyj.jpg">
                        </p>
                        <p class="cur">
                            <img src="/src/assets/images/home/swipe/xn/active-glyj.jpg">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <p class="item">
                            <img src="/src/assets/images/home/swipe/xn/p-tsxg.jpg">
                        </p>
                        <p class="cur">
                            <img src="/src/assets/images/home/swipe/xn/active-tsxg.jpg">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <p class="item">
                            <img src="/src/assets/images/home/swipe/xn/p-wrfx.jpg">
                        </p>
                        <p class="cur">
                            <img src="/src/assets/images/home/swipe/xn/active-wrfx.jpg">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <p class="item">
                            <img src="/src/assets/images/home/swipe/xn/p-hlyd.jpg">
                        </p>
                        <p class="cur">
                            <img src="/src/assets/images/home/swipe/xn/active-hlyd.jpg">
                        </p>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <p class="item">
                            <img src="/src/assets/images/home/swipe/xn/p-ckgx.jpg">
                        </p>
                        <p class="cur">
                            <img src="/src/assets/images/home/swipe/xn/active-ckgx.jpg">
                        </p>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

这上面，我之前把a标签删了，但是不行，我就加回来了。 接下来是JS部分：

let getNav = document.getElementById("c-nav");
let navBox = getNav.querySelector('.festival-nav');
let navList = navBox.querySelectorAll('li');
let classfiyBox = document.querySelectorAll('.classfix-box');
let startTime = 0,isMove = false;
navList.forEach((v,k)=>{
              v.addEventListener('touchstart',function(e){
                        startTime = Date.now();
                        e.preventDefault();
              })
             v.addEventListener('touchmove',function(e){
                            isMove = true;
                            e.preventDefault();
             })
             v.addEventListener('touchend',function(e){
                    if(!isMove && (Date.now()-startTime)<130){
                           document.body.scrollTop = 3500;
                         //document.body.scrollTop = document.documentElement.scrollTop = OFFSET(classfiyBox[k]).top-50;
                   }
                 startTime = 0;
                 isMove = false;
                 e.preventDefault()
            })
 })

[天际的海浪]

我用 document.body.scrollTop = 3500; document.documentElement.scrollTop = 3500; 测试没问题啊

[chen_2016_web]

引用 5 楼 jslang 的回复:

我用 document.body.scrollTop = 3500; document.documentElement.scrollTop = 3500; 测试没问题啊

昨天解决了，是服务器出现了问题。可能是缓存或其他原因吧，我也说不清。