前天测试提了一个需求, 就是我们这个手机端项目在手机浏览器中打开, 有默认的左滑返回上一页的功能, 就是点击按钮进到下一个页面后 , 在屏幕上左滑会返回上一个页面 , 测试说希望把这个默认的功能去掉 , 让用户通过页面的返回按钮返回 , 赶紧各种百度, 终于找到一篇对症下药的文章 , 一下就解决了这个问题, 让我再次感受到面向百度开发的强大 , 感谢百度, 现在把这个方法分享给大家,其实特别简单

一 , 直接在index.html中添加如下代码, 写在style标签和script标签中

  <style>
    html {
      touch-action: none;
      touch-action: pan-y;
    }

  </style>

<script>
  document.addEventListener("touchmove", function (e) {
    e.preventDefalut()
  }, {
    passive: false
  });


  var startX, startY;
  document.addEventListener("touchstart", function (e) {

    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
  });

  document.addEventListener("touchmove", function (e) {

    var moveX = e.targetTouches[0].pageX;
    var moveY = e.targetTouches[0].pageY;

    if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
      e.preventDefault();
    }
  }, {
    passive: false
  });

</script>

二 , 其实没有第二步 , 第一步搞完测一下应该就没问题了 , 但我发现我一个二级页面点进来后左滑还是会返回上一页 , 所以我在这个二级页面又添加了上面的代码, 就解决了 ,如果你们没有这个问题 , 就不用管了

标签：返回,左滑,startX,vue,startY,targetTouches,手机,页面
来源： https://blog.csdn.net/weixin_49577940/article/details/118651521