h5阻止ios侧滑后退页面的问题

背景：在做一个手写签名的需求时，发现在手机端使用签名时会触发页面后退问题。
解决办法：通过监听触屏事件touchmove，使用e.preventDefault()阻止默认事件的发生。

在index.html添加以下代码

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

  </style>

  <script>
    document.addEventListener("touchmove", function (e) {
      //可以在此对需要侧滑的页面开放权限，注释掉 e.preventDefault()，或者return
        e.preventDefault()
    }, {
      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>

引用：https://blog.csdn.net/weixin_49577940/article/details/118651521