Swiper Element breaks touch events

[Paso]

Check that this is really a bug

• I confirm

Reproduction link

https://codepen.io/Tattoo4861/pen/eYLvwjO

Bug description

When using Swiper Element all touch events on the page are broken. Swiper takes over touch and pointer events and re-emits a invalid touchStart event that is missing many expected attributes, such as TouchEvent.touches (see https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event).

In the reproduction codepen we listen to touchStart which should have a touches attribute. When loading swiper the event is missing touches (among other things). If one removes the swiper script-tag the event works as expected again.

The code that is responsible for this is:

1. swiper/src/core/events/onTouchStart.js

   Line 141 in 2533493

   swiper.emit('touchStart', e);

2. swiper/src/core/events/index.js

   Line 22 in 2533493

   el[domMethod]('pointerdown', swiper.onTouchStart, { passive: false });

Swiper should

1. not create events does not exist, such as touch-events from pointer-events
2. if emitting a touchStart event make sure it is a valid TouchEvent

Expected Behavior

No response

Actual Behavior

No response

Swiper version

9

Platform/Target and Browser Versions

Win10+Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[Paso]

Why was it closed? It is clearly a bug that prevents swiper from being used together with other libraries that listens to touch events (such as MUI).

[jvleony]

Why was it closed? It is clearly a bug that prevents swiper from being used together with other libraries that listens to touch events (such as MUI).

same issue here, When i click on a MUI button that is embebed inside an slide, y makes a slide navigation.

[tulies]

Yes, I need to touch events on Android 5. x/6. x。Touch Events is not supported。

[ferhado]

I have the same issue.
Adding pointer-events: none; to the elements inside swiper-slide solves the issue but isn't ideal for clickable content:

swiper-slide > * {
  pointer-events: none;
}

Update:

To address the issue while still allowing clickable content, you can add an event listener for touchmove on the Swiper element. Use preventDefault() to handle the touch event and set the passive option to false.

swiperEl.addEventListener("touchmove", (e: Event) => e.preventDefault(), { passive: false });

This approach ensures that Swiper's touch events work as expected, without affecting the functionality of clickable elements within the slides.