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

jquery svg click blink
Paul Thomas picture Paul Thomas · Jun 6, 2014 · Viewed 15.3k times · Source

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.

Answer

Aziz Abogoda picture Aziz Abogoda · Nov 17, 2014

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

Related questions

How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
jquery's append not working with svg element?

Assuming this: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" …

Read More