我正在处理触摸滑块上的触摸事件,并且不断收到以下错误:
忽略使用 cancelable=false 取消 touchmove 事件的尝试,
例如,因为滚动正在进行中并且无法滚动
打断了。
我不确定是什么导致了这个问题,我是触摸事件的新手,似乎无法解决这个问题。
下面是处理触摸事件的代码:
Slider.prototype.isSwipe = function(threshold) {
return Math.abs(deltaX) > Math.max(threshold, Math.abs(deltaY));
}
Slider.prototype.touchStart = function(e) {
if (this._isSliding) return false;
touchMoving = true;
deltaX = deltaY = 0;
if (e.originalEvent.touches.length === 1) {
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
this._$slider.on('touchmove touchcancel', this.touchMove.bind(this)).one('touchend', this.touchEnd.bind(this));
isFlick = true;
window.setTimeout(function() {
isFlick = false;
}, flickTimeout);
}
}
Slider.prototype.touchMove = function(e) {
deltaX = startX - e.originalEvent.touches[0].pageX;
deltaY = startY - e.originalEvent.touches[0].pageY;
if(this.isSwipe(swipeThreshold)) {
e.preventDefault();
e.stopPropagation();
swiping = true;
}
if(swiping) {
this.slide(deltaX / this._sliderWidth, true)
}
}
Slider.prototype.touchEnd = function(e) {
var threshold = isFlick ? swipeThreshold : this._sliderWidth / 2;
if (this.isSwipe(threshold)) {
deltaX < 0 ? this.prev() : this.next();
}
else {
this.slide(0, !deltaX);
}
swiping = false;
this._$slider.off('touchmove', this.touchMove).one(transitionend, $.proxy(function() {
this.slide(0, true);
touchMoving = false;
}, this));
}
您可以找到实际的滑块在这支笔这里 http://codepen.io/ftntravis/pen/raEuH.
如果你滑动得足够快,它会抛出错误,有时会卡在滑动中间。我仍然无法理解为什么它不起作用。任何帮助/见解将不胜感激。不确定我做错了什么。
该事件必须是cancelable
。添加一个if
声明解决了这个问题。
if (e.cancelable) {
e.preventDefault();
}
在您的代码中,您应该将其放在这里:
if (this.isSwipe(swipeThreshold) && e.cancelable) {
e.preventDefault();
e.stopPropagation();
swiping = true;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)