MS Edge无法检测<use> SVG元素的委托事件？

Question

我想我发现MS Edge存在一个令人不安的错误,它会影响动态创建的SVG <use>元素.Edge似乎能够检测直接绑定事件,即$('.use').on('click', ...),但是委托事件$('body').on('click', 'use', ...)被忽略.

最简单的说明是使用JS Fiddle(在Chrome中进行测试,其中两个绑定都在工作和Edge中,其中委托绑定不起作用):https:
//jsfiddle.net/Lr0arahb/

有没有人对这个问题有任何见解,并且知道可能的解决方法？最重要的是,我正在寻找一种解决方案,我们仍然可以使用这些<use>元素,因为它对我们的SPA来说是必不可少的.

Answer 1

我也用Edge 13找到了它.这绝对是一个黑客而不是一个可靠的解决方案,但为了解决它我把SVG放在一个容器中并使用透明的伪元素来覆盖SVG.这样,伪元素获得点击而不是SVG.

按钮中使用的示例SVG图标:

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

CSS修复:

.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;
}

您可以使用:before或:after伪元素.