MS Edge can't detect delegated events for <use> SVG elements?

Question

I think I've found a troubling bug with MS Edge that impacts on dynamically created SVG <use> elements. Edge seems to be able to detect directly bound events, i.e. $('.use').on('click', ...), however delegated events $('body').on('click', 'use', ...) are ignored.

It is most easily illustrated with a JS Fiddle (tested in Chrome, where both bindings in work and in Edge where the delegated binding doesn't work):
https://jsfiddle.net/Lr0arahb/

Does anyone have any insight on this issue, and knows of a possible workaround? Foremost, I'm looking for a solution where we can still use the <use> elements as it's imperative for our SPA.

Answer 1

I too have found this with Edge 13. It's definetly a hack rather than a solid solution but to work around it I put the SVG in a container and used a transparent pseudo-element to cover the SVG. This way the pseudo-element gets the click rather than the SVG.

Example SVG icon used in a button:

<button class="close" type="button">
  <svg role="img" class="icon icon--close">
    <use xlink:href="icons.svg#close" />
  </svg>
</button>

CSS Fix:

.close {
  /* Make it so the pseudo-element is relative to this parent element */
  position: relative;
}

.close:after {
  /* Cover the button with a pseudo-element so the SVG can't be clicked */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

You can use :before or :after pseudo-elements.

Answer 2

Using pointer-events: none can solve this. Instead of applying it to the <svg> tag and attaching handlers to a container element as is mentioned in a comment, if you add pointer-events: none to the <use> itself, this prevents it from stopping event propagation, and the outer <svg> can still be receptive to mouse events.