How do I fix the script error: Unable to preventDefault inside passive event listener .... ?

[james-ep01]

Introduction

It always happens when I drag from stencil to paper. What should I do?

I was just going to ignore it, but I don't think I can ignore it.
It also occurs in the kitchen app.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

How did you get this specific error? It's not what I see in the Kitchen Sink application.

Are you calling evt.preventDefault() anywhere during the stencil drag & drop?

You should be able to prevent the error like this:

joint.mvc.$.event.special.touchstart = {
    setup: function(_, ns, handle) {
       this.addEventListener("touchstart", handle, { passive: false });
    }
};

[james-ep01]

This is a Kitchen Sink app v4.1 that you install without any modifications. It happens when i drag and drop.

script_error_2025-01-03.095823.mp4

And of course it happens in my app too.

[kumilingus]

What browser do you use?

[james-ep01]

When developing a web, I do cross-testing with Chrome and Edge. The versions are as follows. The symptoms occur in both browsers.

[kumilingus]

I was able to reproduce it when I simulated a mobile device (to make the browser trigger touch events instead of mouse).

This CSS solved the problem for me:

.joint-paper {
   touch-action: pan-y pinch-zoom;
}

Please see https://developer.chrome.com/blog/scrolling-intervention for more details.

[james-ep01]

Wow, it works fine without any errors. Thank you very much.
But why doesn't the error occur in your browser console, but on mobile, and on the PCs I tested?

[kumilingus]

Maybe the computer you tested has a touch screen?

[james-ep01]

Maybe the computer you tested has a touch screen?

Unfortunately, there is no touch..

[kumilingus]

Thanks, we will do some more testing. This should be resolved on the library level.