Touch move getting stuck Ignored attempt to cancel a touchmove

Question

I'm messing around with touch events on a touch slider and I keep getting the following error:

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

I'm not sure what is causing this problem, I am new to working with touch events and can't seem to fix this problem.

Here is the code handling the touch event:

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)); } 

You can find the actual slider here at this pen.

If you swipe through fast enough it will throw the error and sometimes get stuck in the middle of a swipe. Still can't wrap my head around why it is not working. Any help/insight would be greatly appreciated. Not sure what I am doing wrong.

Answer 1

The event must be cancelable. Adding an if statement solves this issue.

if (e.cancelable) {    e.preventDefault(); } 

In your code you should put it here:

if (this.isSwipe(swipeThreshold) && e.cancelable) {    e.preventDefault();    e.stopPropagation();    swiping = true; } 

Answer 2

I had this problem and all I had to do is return true from touchend and the warning went away.