Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG click events not firing/bubbling when using <use> element

I have come across an interesting bug (?) whereby if you embed the SVG using <use> as part of a link (an icon for example) – the icon itself does not register a click event in jQuery, but clicking the text does. I think this is due to SVG events not bubbling up?

If you embed the SVG directly, the link triggers regardless of whether you click the text or the icon.

A simple test case I created can be seen here: SVG <use> bug test case.

like image 380
Paul Thomas Avatar asked Jun 06 '14 09:06

Paul Thomas


2 Answers

Use pointer-events: none; on the svg. It worked for me.

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

like image 106
Aziz Abogoda Avatar answered Oct 20 '22 16:10

Aziz Abogoda


I had the same problem. The fix I use is to just put a transparent div over the svg. But that is not ideal of course.

like image 5
Ole Spaarmann Avatar answered Oct 20 '22 16:10

Ole Spaarmann