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

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

本文关键字：元素 SVG 事件 使用 检测 Edge MS      更新时间：2023-09-26

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

它最容易用 JS Fiddle 来说明（在 Chrome 中测试，其中绑定都有效，而在 Edge 中委托绑定不起作用）：
https://jsfiddle.net/Lr0arahb/

有没有人对这个问题有任何见解，并知道可能的解决方法？最重要的是，我正在寻找一种解决方案，我们仍然可以使用<use>元素，因为这对于我们的 SPA 至关重要。

我也在 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伪元素。

使用pointer-events: none可以解决这个问题。如果将pointer-events: none添加到<use>本身，则不会像注释中提到的那样将其应用于 <svg> 标记并将处理程序附加到容器元素，这会阻止它停止事件传播，并且外部<svg>仍然可以接受鼠标事件。

相关文章：