使用元素时，SVG单击事件不会触发/冒泡

我遇到了一个有趣的错误（？），如果你使用作为链接的一部分（例如一个图标）嵌入SVG – 图标本身不会在jQuery中注册click事件，而是单击文本。我认为这是由于SVG事件没有冒泡？

如果直接嵌入SVG，无论是否单击文本或图标，链接都会触发。

我在这里可以看到一个简单的测试用例： SVG bug测试用例。

使用pointer-events: none; 在svg上。它对我有用。

该元素永远不是鼠标事件的目标; 但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间根据往返于后代的方式触发此父元素上的事件侦听器。

我有同样的问题。我使用的修复方法是在svg上放置一个透明的div。但这当然不是理想的。

我有同样的问题，我使用display: block或display: inline-block链接上的display: inline-block ，它工作。

您可以使用该css代码来防止该错误。如果您将使用带有事件冒泡的那些，请小心：

按钮元素svg元素use元素

  button > * { pointer-events: none; }