anchor <a> tag inside slide snaps to next slide on first click

[msmzuppa]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/elated-margulis-5m21z?file=/index.html

Bug description

when I use a anchor(<a>) tag inside a slide when I do a right click on the tag it slides without animation to the next slide.

Expected Behavior

open browser context menu

Actual Behavior

slides to the next slide without animating

Swiper version

8.0.3

Platform/Target and Browser Versions

Brave 1.34.80 Chromium: 97.0.4692.71

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

[rawthriver]

+1. FF latest.
Setting simulateTouch to false does not help.

[johnozbay]

Found the answer here : #3149 (comment)
Setting watchSlideProgress to true fixed the problem for our use case.

---

Also possibly related to #5490

[msmzuppa]

Setting watchSlideProgress to true does not fix it.

[msmzuppa]

disabled mousedown on the tags inside the swiper tag

jQuery:
$(".swiper").find("a").off("mousedown").on("mousedown", function(e){ e.preventDefault(); e.stopImmediatePropagation(); });

[kwastaras1337]

jQuery:
$(".swiper").find("a").off("mousedown").on("mousedown", function(e){ e.preventDefault(); e.stopImmediatePropagation(); });

thank you! it worked

[ghost]

Found the answer here : #3149 (comment) Setting watchSlideProgress to true fixed the problem for our use case.

Also possibly related to #5490

watchSlidesProgress: true solved this problem in my case

[AIC-BV]

Also happens on button tags...
Adding e.preventDefault() a your mousedown event (not click) 'fixes' it

[curtisburns]

This is still a problem.

Also happens on button tags... Adding e.preventDefault() a your mousedown event (not click) 'fixes' it

To build on this, if using React, add via the onMouseDown prop on the SwiperSlide component.

[cianmung]

disabled mousedown on the tags inside the swiper tag

jQuery: $(".swiper").find("a").off("mousedown").on("mousedown", function(e){ e.preventDefault(); e.stopImmediatePropagation(); });

This method works for me! Thank you for the solution :D

[Skoua]

I had to use pointerdown to make it work:

item.addEventListener('pointerdown', (e) => {
  e.preventDefault()
  e.stopImmediatePropagation()
})