Easy fix for: '[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false'

This short blog explains what's causing this error and how you can quickly fix it.

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.

Intervention violations can cause unwanted behavior and are visible in the visitors' developer console. Additionally, browsers can send violation reports to alert website administrators using the Reporting API. This allows web developers to resolve these violations proactively and monitor how frequently they occur.

What is the error about?

The error is about touch events, so it's probably a mobile browser 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 into two parts, it becomes much clearer:

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 scrolling, for example, and 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 its thing, like scrolling a page, and you want to cancel this scrolling behavior, the browser says, No way! You can't cancel me! I'm warning you!

Now, which 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. However, not all events are cancelable, and some will throw an intervention error.

How to fix this issue

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

To fix the issue, check whether or not the event is cancelable before calling preventDefault(). To check whether 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 violations on your site

If you want to monitor these violations, check out our monitoring platform URIports. With our service, you can monitor network traffic, network disruptions, content security policy violations, and much much more!

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