question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onClick event is not triggered on svg elements on mobile

See original GitHub issue

Actually, 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:open
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
alcalyncommented, Mar 6, 2018

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, the onTouchEnd event, at the end of the click or drag.

1reaction
Dusty4848commented, May 14, 2019

The onTouchEnd event did the trick! Thanks

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found