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

Question

我遇到了一个有趣的错误(？),如果您使用<use>作为链接的一部分(例如图标)嵌入SVG - 图标本身不会在jQuery中注册click事件,但单击文本会.我认为这是由于SVG事件没有冒泡？

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

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

Answer 1

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

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

这很奇怪。我不得不使用 `pointer-events: all;` 来让 svg-elements 触发点击事件，而不是没有。这个答案对我有误导性，但我可能只是不明白一些事情。 (3认同)
好答案.我还发现,如果使用对象嵌入SVG,您提到的CSS声明应该应用于对象而不是SVG. (2认同)

Answer 2

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