Is there a possibility to deactivate swipe navigation on mobile browsers?

I am building a VueJS form, which has multiple steps and a back button, to go to the previous step. All steps are managed in a parent component, so the URL / router history does not change with the steps.

So when a user swipes over the edge of their phone the browser navigates to the previous page on the browser history. I want to change this behaviour, so the swipe gesture has the same function as the back button on my form (navigate between form steps, not pages) or is deactivated completely.

I have already tried to

• set touch-action: none on the body and html
• set overscroll-behaviour: none on the body and html
• call preventDefault() on touchstart and touchmove

However, the swipe behaviour does not seem to be influenced by the web app. Is there any way to prevent the navigation?

I am currently testing on Safari iOS on the xCode simulator, but the desired behaviour would have to work both on iOS and Android.

For the answer, look at the comment from @Ohgowhy

The event listener needed { passive: false } passed as option. This worked on every major mobile browser but Firefox on Android