onClick event being fired during drag
See original GitHub issueBug is related to
- The Vanilla JavaScript version
- The React version
- The Embla Carousel core (all versions)
- Documentation website
- Other
Embla Carousel version
- 4.3.1 (older versions as well)
Describe the bug
When dragging a slide and letting go, it triggers a click
event when the drag is released. This can be problematic for carousel items that have click handlers on them.
A common thing people will do with carousel items is attach an click
handler to trigger a specific behavior such as:
- opening a modal
- redirecting to another page in the app
- etc…
https://user-images.githubusercontent.com/6743796/113911974-77be2680-978f-11eb-9535-5a7731221cdf.mp4
CodeSandbox
Steps to reproduce
- Add click handler on a carousel item
- Drag the item and release
Expected behavior
The api should be able to distinguish between a drag event and an on click event.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
onClick event being fired during drag · Issue #174 - GitHub
When dragging a slide and letting go, it triggers a click event when the drag is released. This can be problematic for carousel...
Read more >drag event is being fired on click - javascript - Stack Overflow
dragstart fires when the user clicks the element, while dragmove fires on every update on the element position. The problem is that dragmove...
Read more >ondrag Event - W3Schools
The ondrag event occurs when an element or text selection is being dragged. Drag and drop is a common feature in HTML. It...
Read more >Introduction to browser events - The Modern JavaScript Tutorial
Here's a list of the most useful DOM events, just to take a look at: Mouse events: click – when the mouse clicks...
Read more >ASP.NET Core Blazor event handling - Microsoft Learn
Implement drag and drop in Blazor apps using JS interop with HTML Drag ... An onclick event occurring in the child component is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hi @cliffordfajardo,
I recently released the search feature on the documentation website. I went with Algolia Docsearch.
Cheers, David
Hi Clifford (@cliffordfajardo),
Thank you for your question. This is not a bug.
Have you read about the opt-in
clickAllowed
method in the docs?Maybe this explanation from issue #132 which is related to this will help.
Let me know if it helps.
Best, David