In this blog I will try to help you understand and fix this error. It really is an easy fix when you understand what is happening.

The error in question:

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

Other variants of these errors are:

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

or

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

What is the error about?

The error is about touch events, so it's probably a mobile browser that is triggering the error. Most of the errors will be triggered by Chrome on Android or another browser based on Chromium.

When you separate the error in two parts; it becomes more clear:

Part 1

Ignored attempt to cancel a touchmove event with cancelable=false - so your browser has ignored the request to cancel an event called touchmove that has a property called cancelable that has a boolean value of false.

Part 2

for example because scrolling is in progress and cannot be interrupted. - so the event is busy with, for example, scolling and it refuses to be interrupted.

Alright, so on your (probably mobile) site, there is an event listener that listens to touch input. When this listener is in the process of doing it's thing, like scrolling a page and you want to cancel this scrolling behaviour, the browser says; No way! You can't cancel me! Here's a warning!

Now what part of your source code is trying to cancel a touch event?
It's the: preventDefault() event method.

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. Not all events are cancelable and some will throw an intervention error.

How to fix this issue

A fix is easy when you have found the event containing the preventDefault() method.

To fix the issue; check if the event is cancelable before calling preventDefault(). To check if the event is cancelable, check the boolean value of the cancelable event property by checking event.cancelable.

If this property is true, then you can call the preventDefault() method.

So in code, change this:

event.preventDefault();

to:

if (event.cancelable) event.preventDefault();

That's it.

Monitor this and many other issues on your site

If you want to monitor these issues when they occur on your site, check out our monitoring platform URIports. With our software you can monitor network traffic, network disruptions, content security policy violations and many many more!

If you have any more questions about this subject, just drop me a line at @roelandkuiper or @uriports