使用<use>元素时，SVG点击事件无法触发/冒泡

Question

我遇到了一个有趣的 bug (?)，如果你使用 <use> 作为链接（例如图标）嵌入 SVG，那么图标本身将无法在 jQuery 中注册点击事件，但点击文本则可以。我认为这是由于 SVG 事件没有冒泡导致的？

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

我创建了一个简单的测试用例，可以在这里查看： SVG <use> bug test case。

- Paul Thomas

---

有趣的是，如果你使用$('.element').click(function(){ ... })而不是$(document).on('click', '.element', function(){ ... })，它似乎会触发。 - Paul Thomas

我已经为Blink（Chrome/Opera）报告了https://code.google.com/p/chromium/issues/detail?id=382872。 - Erik Dahlström

当SVG作为<object>嵌入时，我遇到了相同的问题。 - mynameisnotallowed

Answer 1

在SVG元素上使用pointer-events: none;。这对我有用。

该元素不是鼠标事件的目标；但是，如果那些后代元素的指针事件设置为其他值，则鼠标事件可能会针对其后代元素。在这些情况下，在事件捕获/冒泡阶段期间，鼠标事件将在适当的时候触发此父元素上的事件监听器，以便前往/从后代元素。

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

- Aziz Abogoda

---

谢谢@Omar，这是个聪明的技巧！我认为Chrome现在已经修复了这个问题，我自从那以后就没有遇到过了。但如果我遇到了，我一定会记住它。这对其他问题也可能有用。 - Paul Thomas

好的回答。我还发现，如果使用对象嵌入SVG，则应将您提到的CSS声明应用于对象，而不是SVG。 - Liran H

在撰写此评论时，我在Chrome和Firefox中不需要pointer-events，但在IE-11中需要此解决方法，否则事件将无法触发。 - Rose

我完了...Bootstrap下拉菜单不起作用。我在页面上的每个SVG上都有pointer-events: none，但在Edge中失败了...<use>吞噬了点击事件。这太荒谬了。 - msqar

很奇怪，我不得不使用 pointer-events: all; 才能让 SVG 元素触发点击事件，而不是 none。这个答案对我来说很误导，但我可能只是没理解其中的某些内容。 - Gherman

Answer 2

我遇到了同样的问题。我使用的解决方法是在SVG上方放置一个透明的div。但这当然不是理想的解决方法。

- Ole Spaarmann

Answer 3

我曾经遇到过同样的问题，我在链接上使用了display: block或display: inline-block，然后问题得到了解决。

- anirban saha