onClick event is not triggered on svg elements on mobile
See original GitHub issueActually, I have svg elements on which I can listen to the onClick
event.
But this event is no longer triggered once I wrap svg elements into ReactSVGPanZoom
.
To test it, just use the onClick
event on an svg element, with:
<g onClick={console.log}>
...
</g>
Then, on mobile, the event is dispatched on mobile, but it is not when I try to wrap it with ReactSVGPanZoom
:
<ReactSVGPanZoom>
<g onClick={console.log}>
...
</g>
</ReactSVGPanZoom>
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
jQuery click event not working for SVG element on mobile ...
I am using an SVG as a map, ...
Read more >Why click event not working on SVG - Abhineet.in
It turned out that as SVGs are independent HTML objects, the target element is actually nested path. So, it does not match with...
Read more >Scripting and Interactivity — SVG 2
The following event types are triggered due to state changes in animations. beginEvent · endEvent · repeatEvent. The event attributes for these animation...
Read more >svg click event not bubbling - Google Groups
I originally used a jQuery “on” handler – I recently switched to d3.on() but the problem persists. I've tried attaching to the SVG...
Read more >SVGAnimationElement: endEvent event - Web APIs | MDN
The endEvent event of the SVGAnimationElement interface is fired when at the active end of the animation is reached. Note: This event 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 FreeTop 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
Top GitHub Comments
Yes, here is the jsFiddle: http://jsfiddle.net/f67qyfsd/72/ And for mobile, the embedded version, here is the qrcode: https://duckduckgo.com/?q=qrcode+http%3A%2F%2Fjsfiddle.net%2Ff67qyfsd%2F72%2Fembedded%2F
On desktop, there is
onClick
event, and on mobile, theonTouchEnd
event, at the end of the click or drag.The onTouchEnd event did the trick! Thanks