SVG click events not firing/bubbling when using element

Question

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.

Interestingly, it seems to fire if you use $('.element').click(function(){ ... }) rather than $(document).on('click', '.element', function(){ ... }); — Paul Thomas, Jun 06 '14 at 09:51
I've reported https://code.google.com/p/chromium/issues/detail?id=382872 for Blink (Chrome/Opera). — Erik Dahlström, Jun 10 '14 at 10:38

score 66 · Accepted Answer · answered Nov 17 '14 at 00:09

66

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

answered Nov 17 '14 at 00:09

Aziz Abogoda

776
7
5

Thanks @Omar that's a clever trick! I think this has been fixed in Chrome now and I've not come across it since. But if I do I'll definitely keep it in mind. Might be useful for other issues too. – Paul Thomas Nov 18 '14 at 09:42
My pleasure. I came across the problem with Safari. – Aziz Abogoda Nov 18 '14 at 18:56
3

Good answer. I've also found that if embedding an SVG using an object, the CSS declaration that you mentioned should be applied to the object rather than the SVG. – Liran H Nov 20 '15 at 12:08
1

At the point of writing this comment, I didn't need pointer-events for chrome and firefox, but for IE-11 it needed this workaround or else the events would not fire. – Rose Nov 03 '16 at 23:44
I had the same problem but only present on IE10+. This fix worked for me, thanks! – Adam Apr 05 '17 at 16:15
im screwed... it doesn't work on Bootstrap Dropdown. I have pointer-events: none on every svg in my page, but in Edge fails... swallows the click event. This is ridiculous. – msqar Apr 19 '17 at 00:00
3

This is very strange. I had to use `pointer-events: all;` to make svg-elements fire click events, not none. This answer was misleading for me but I probably just don't understand something. – Gherman Sep 22 '17 at 12:46
I have svg icons inside my links and this was capturing the bubble in IE11 until I added this. This guards IE with a css hack. /* needed for IE11 remove this someday This is a complete hack to only target IE! */ @media all and (-ms-high-contrast: none) { svg { pointer-events: none; } } – httpete Dec 13 '17 at 15:22

score 5 · Answer 2 · answered Sep 09 '14 at 12:41

5

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.

answered Sep 09 '14 at 12:41

Ole Spaarmann

15,845
27
98
160

score 0 · Answer 3 · edited Jan 25 '18 at 15:38

0

I had the same problem and I used display: block or display: inline-block on the link and it worked.

edited Jan 25 '18 at 15:38

vich

11,836
13
49
66

answered Jan 25 '18 at 15:32

anirban saha

1

SVG click events not firing/bubbling when using element

3 Answers3

Linked