ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 786 forks source link

MouseDrag on a slide with a link element opens the target of the link #360

Open RobinDev opened 5 years ago

RobinDev commented 5 years ago

I re-open an old issue #189

If you drag an element with a link, link is open : https://codepen.io/anon/pen/OaMLew

deanc commented 5 years ago

Same issue here, and a more limited demo: https://codepen.io/anon/pen/JVgqKr

(check console)

trailsnail commented 5 years ago

Since Release 2.9.0 dragging an element (in my case in a form tag > ul class="tns-slider" > li > div > input + img) produces error in Chrome Dev Tools: tiny-slider.js:2995 Unable to preventDefault inside passive event listener invocation. onPanMove | @ | tiny-slider.js:2995

If one of the tns-controls is clicked, the form is not submittet, but a request is fired to current Url with the currect active hidden input type="radio" name + value in the slide.

With Release 2.8.8 this behavior can't be reproduced

tomablan commented 5 years ago

Hi ! Unfortenately, I can reproduce this too... I couldn't spend more time to investigate, but I think the problem is in the function onPanEnd, that somehow doesn't prevent the event the initial click event...

But still not sure, I disabled dragging to avoid the problem.

GMenegatto commented 3 years ago

Hello, i had the same issue using ngx-tiny-slider.

Solved by doing this:

//.ts

mousePosition = { x: 0, y: 0 };

mouseDown($event) { this.mousePosition.x = $event.screenX; this.mousePosition.y = $event.screenY; }

onClick($event) { if (this.mousePosition.x === $event.screenX && this.mousePosition.y === $event.screenY) { //your function here... } }

//.html ngx-tiny-slider div (mousedown)="mouseDown($event)" (click)="onClick($event)" //your tags here.. div ngx-tiny-slider

t0byman commented 3 years ago

Nice but would really like a fix for the non-ngx version

boeckMt commented 2 years ago

The combination of these two answers

fixed the problem for me.

rozaljkeee commented 1 year ago

The combination of these two answers

fixed the problem for me.

⚠️ Be careful of use dragEnd, because this event is not fired when curson returns to exactly same place after dragMove

mostafa-norouzi commented 1 year ago

I used event listener trick but sometimes it didn't triggered. Finally I switched to the Splide. It doesn't have this problem.