【前端】页面下拉加载和touchMove冲突解决（未完全解决）

问题描述：

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
翻译：尝试取消一个touchmove事件cancelable=false，例如，因为滚动正在进行，不能被中断。
其他情况补充：

1. 页面功能描述：
   模拟聊天页面，下拉加载过去的聊天记录，对于单条的聊天记录点击或者长按进行自定义操作，但是touchmove时和页面的滚动发生错误。
2. 下拉加载代码展示：

<div class="pull-to-refresh__layer">
      <div class='pull-to-refresh__arrow'></div>
      <div class='pull-to-refresh__preloader'></div>
      <div class="down">下拉刷新</div>
      <div class="up">释放刷新</div>
      <div class="refresh">正在刷新</div>
</div>

$(".main").pullToRefresh(function () {  //下拉
   //加载数据
});
//数据加载之后
$(".main").pullToRefreshDone();

css代码在文章最后

3. 触摸移动代码展示

 $dom.on({
          //长按开始
     touchstart: function (e) {
          //判断消息的间隔
         timeOutEvent = setTimeout(function () {
           timeOutEvent = 0;
         }, 500);
         //e.preventDefault();  //开启后禁止了页面滚动事件（当触摸聊天记录时）
        },
       //TODO 下拉刷新和touch冲突（时而冲突时而不冲突）
     touchmove: function (e) {
         clearTimeout(timeOutEvent);
         timeOutEvent = 0;
       },
     touchend: function (e) {
         clearTimeout(timeOutEvent);
         if (timeOutEvent != 0) { //点击事件
         //自定义点击事件
         }
         return false; //阻止事件继续传播
     }
});

4. 问题出现操作
   经过简略的测试，发现单纯的下拉没有问题，但是如果下拉后没有松开，继续向上回收再接着下拉就会有报错

所做的解决措施（并没有完全解决问题）：

html{
	touch-action: none;
}

下拉css代码

.pull-to-refresh {
  margin-top: -50px;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
}
.pull-to-refresh.refreshing {
  -webkit-transform: translate3d(0, 50px, 0);
          transform: translate3d(0, 50px, 0);
}
.pull-to-refresh.touching {
  -webkit-transition-duration: 0s;
          transition-duration: 0s;
}
.pull-to-refresh__layer {
  height: 30px;
  line-height: 30px;
  padding: 10px;
  text-align: center;
    margin-bottom: 1rem;
}
.pull-to-refresh__layer .down {
  display: inline-block;
}
.pull-to-refresh__layer .up,
.pull-to-refresh__layer .refresh {
  display: none;
}
.pull-to-refresh__layer .pull-to-refresh__arrow {
  display: inline-block;
  z-index: 10;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: -4px;
  background: no-repeat center;
  background-size: 13px 20px;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
          transform: rotate(0deg) translate3d(0, 0, 0);
  background-image: url(...);
}
.pull-to-refresh__layer .pull-to-refresh__preloader {
  display: none;
  vertical-align: -4px;
  margin-right: 4px;
  width: 20px;
  height: 20px;
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: preloader-spin 1s steps(12, end) infinite;
          animation: preloader-spin 1s steps(12, end) infinite;
}
.pull-to-refresh__layer .pull-to-refresh__preloader:after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(...);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
}
.pull-up .pull-to-refresh__layer .down,
.refreshing .pull-to-refresh__layer .down {
  display: none;
}
.pull-up .pull-to-refresh__layer .pull-to-refresh__arrow {
  display: inline-block;
  -webkit-transform: rotate(180deg) translate3d(0, 0, 0);
          transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-up .pull-to-refresh__layer .up {
  display: inline-block;
}
.pull-down .pull-to-refresh__layer .pull-to-refresh__arrow {
  display: inline-block;
}
.pull-down .pull-to-refresh__layer .down {
  display: inline-block;
}
.refreshing .pull-to-refresh__layer .pull-to-refresh__arrow {
  display: none;
}
.refreshing .pull-to-refresh__layer .pull-to-refresh__preloader {
  display: inline-block;
}
.refreshing .pull-to-refresh__layer .refresh {
  display: inline-block;
}
@keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}