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

Question

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

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

我在这里可以看到一个简单的测试用例： SVG <use> bug test case

Answer 1

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

  

元素永远不是鼠标事件的目标;但是，鼠标事件   如果那些后代具有，则可以将其后代元素作为目标   指针事件设置为其他值。在这种情况下，鼠标   事件将触发此父元素上的事件侦听器   适合在活动期间往返于后代的路上   捕获/泡沫阶段。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

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

Answer 3

我遇到了同样的问题，我在链接上使用了display: block或display: inline-block，但它确实有效。