2014-10-21 3 views
18

Я бездельничал с сенсорными событиями на сенсорный слайдере, и я получаю следующее сообщение об ошибке:сенсорного шага застревать игнорируемую попытку отменить TouchMove

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

Я не уверен, что является причиной этой проблемы , Я новичок в работе с сенсорными событиями и не могу решить эту проблему.

Вот обработки сенсорного события Код:

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

Вы можете найти фактический ползунок here at this pen.

Если вы промахнетесь достаточно быстро, это вызовет ошибку и иногда застрянет посредине салфетки. Все еще не могу окутать голову, почему она не работает. Любая помощь/понимание будут оценены. Не уверен, что я делаю неправильно.

ответ

9

У меня была эта проблема, и все, что мне нужно было сделать, это return true от touchhend, и предупреждение ушло.

+7

Здесь ничего не меняет – Eric

+0

И в чем причина, по которой это работает? –

+0

Я добавил 'e.cancelable' в оператор if, прежде чем пытаться вызвать' e.preventDefault() 'внутри этого оператора. – ravo10

3

Вызов preventDefault на touchmove, пока вы активно прокручиваете, не работает в Chrome. Чтобы предотвратить проблемы с производительностью, вы не можете прервать прокрутку.

Попробуйте позвонить по телефону preventDefault() из touchstart и все должно быть в порядке.

+1

Тогда я просто получаю: Игнорированная попытка отменить событие touchstart – Curtis