[Intervention] Ignored attempt to cancel a touchmove event when swiping

[sts-ryan-holton]

I'm using the vue2-touch-events plugin to create some "native like" swiping behaviour for a Nuxt JS hybrid app built with Cordova. I've implemented an element (positioned absolutely) over the majority of the screen that once swiped on the $router pushes to a new page.

This has been working fine up until recently where I have noticed an error being fired in my console:

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

I'm not too sure why I'm experiencing this error, and have attempted to revert some things which has made no difference. The code in question is attached:

HTML Vue JS markup

<span
  v-touch:swipe.right="swipePrevPage"
  v-touch:swipe.left="swipeNextPage"
  class="page-swipe-trigger">
</span>

Implemented methods

/**
 * Handle page swipe (next page)
 */
swipePrevPage() {
  if (this.page && this.id && this.$refs.hasPages[0].innerText === 'true') {
    if (this.prevPage != -1) {
      this.$router.push('/url/' + this.page + '/' + this.prevPage)
    } else {
      this.$router.push('/url/' + this.page)
    }
  }
},

/**
 * Handle page swipe (next page)
 */
swipeNextPage() {
  if (this.page && this.id && this.$refs.hasPages[0].innerText === 'true') {
    if (this.nextPage < parseInt(this.$refs.getPages[0].innerText)) {
      this.$router.push('/url/' + this.page + '/' + this.nextPage)
    }
  }
}

For refernece, I'm using version 2.3.0 of the plugin, and have it configured like this...

import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents, {
  touchClass: 'touched',
  swipeTolerance: 50
})

If someone could help me with why I'm experiencing this error, the error shows up when trying to swipe.

[sts-ryan-holton]

@jerrybendy

[jerrybendy]

Hi, @sts-ryan-holton ,

Sorry for late response, I'm in my vacation these days. Could you tell me more detail about your environment? I never seen these error before, How it be happen?

[sts-ryan-holton]

It's with a fresh install, I've had to revert to using some other package but really wanted to use this since it contains good options for touch, sadly though something recent has stopped working in this library and thus the above error and code since I have not changed any code.

[jerrybendy]

I have checked this error and tested in Chrome 84. This is caused by calling preventDefault when scrolling. Using v-touch:swipe.prevent would cause this issue sometimes. And using v-touch:swipe is OK. You can try to remove the prevent modifier if you have, And tell me more details about the error if this could not resolve your issue. Click the line number of the error, you browser will show you which line cause this error, this could help to find the error.

[sts-ryan-holton]

@jerrybendy Remove the prevent modifier? Which as per the above is not present:

<span
  v-touch:swipe.right="swipePrevPage"
  v-touch:swipe.left="swipeNextPage"
  class="page-swipe-trigger">
</span>

[jerrybendy]

I can't make sure. There is no prevent modifier in your example. In my test case, everything works well without prevent, but throw error sometimes when I add the prevent modifier.

I have made a small change in code in line 152.

+ if (event.cancelable) {
  event.preventDefault();
+ }

You can try this.

[sts-ryan-holton]

@jerrybendy Thanks! I did read up online in a few places that the error can be resolved with adding a check for event.cancelable, but was searching in my code but came to the logical conclusion that the package needed updating... I'll give this a go, hopefully it'll work 👍

[jerrybendy]

You can try to change codes in node_modules like above 🤔 If it works, I will release a new version to fix this issue

[sts-ryan-holton]

Cool, I'm on holiday at the moment, I'll get around to trying this within the next week or two

[sts-ryan-holton]

@jerrybendy Hi, I've just tried this and it doesn't seem to make any difference. Doesn't appear to break anything, neither allow my swiping to function correctly :(

[jerrybendy]

ah... maybe you can try to change the router.push in a nextTick callback

[ErickPetru]

Hi @jerrybendy I'm dealing with the same [Intervention] error on console when using .prevent modifier. In fact, for my use case I can remove the modifier without unexpected behaviors, but a simple solution to avoid the console error is change the line 221:

+ if (binding.modifiers.prevent && e.cancelable) {
- if (binding.modifiers.prevent) {
    e.preventDefault();
}

[jerrybendy]

@ErickPetru I have made this change on v3.1.1, you can try this.

[ErickPetru]

Nice @jerrybendy, no console error logged anymore.