问题描述:
[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,例如,因为滚动正在进行,不能被中断。
其他情况补充:
- 页面功能描述:
模拟聊天页面,下拉加载过去的聊天记录,对于单条的聊天记录点击或者长按进行自定义操作,但是touchmove时和页面的滚动发生错误。 - 下拉加载代码展示:
<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代码在文章最后
- 触摸移动代码展示
$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; //阻止事件继续传播
}
});
- 问题出现操作
经过简略的测试,发现单纯的下拉没有问题,但是如果下拉后没有松开,继续向上回收再接着下拉就会有报错
所做的解决措施(并没有完全解决问题):
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);
}
}