使用 <use> 元素时，SVG 点击事件未触发/冒泡答案

【问题标题】：SVG click events not firing/bubbling when using <use> element使用 <use> 元素时，SVG 点击事件未触发/冒泡
【发布时间】：2014-07-27 12:41:20
【问题描述】：

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

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

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

【问题讨论】：

有趣的是，如果你使用 $('.element').click(function(){ ... }) 而不是 $(document).on('click', ' .element', function(){ ... });
我已经为 Blink (Chrome/Opera) 报告了 code.google.com/p/chromium/issues/detail?id=382872。
当 svg 嵌入为时我遇到了同样的问题

【解决方案1】：

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

元素永远不是鼠标事件的目标；但是，鼠标事件如果这些后代有指针事件设置为其他值。在这些情况下，鼠标事件将触发此父元素上的事件侦听器在活动期间适合他们往返后代的途中捕获/冒泡阶段。

【讨论】：

感谢@Omar，这是一个聪明的把戏！我认为这已经在 Chrome 中修复了，从那以后我就再也没有遇到过。但如果我这样做了，我一定会记住的。也可能对其他问题有用。
我的荣幸。我遇到了 Safari 的问题。
好答案。我还发现，如果使用对象嵌入 SVG，则您提到的 CSS 声明应该应用于对象而不是 SVG。
在撰写此评论时，我不需要 chrome 和 firefox 的指针事件，但对于 IE-11，它需要这种解决方法，否则事件不会触发。
这很奇怪。我不得不使用pointer-events: all; 来使 svg-elements 触发点击事件，而不是没有。这个答案对我来说是一种误导，但我可能只是不明白。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我遇到了同样的问题，我在链接上使用了display: block 或display: inline-block，它成功了。

【讨论】：