JQuery + SVG对象：正确捕获点击事件

好的，我正在尝试捕获菜单项上的点击事件

这是我的HTML：

这是我正在使用的脚本：

  $("#wrapper").on("click", '#friendsLink', function(){ console.log('test'); loadFriends(); }); 

当我使用脚本选择一个简单的a-tag时，它工作正常，但在这个svg对象上它根本不起作用。 请注意，单击li元素的填充区域时，它确实有效。 但在点击svg-image区域时却没有。

这个post中的post表明svg dom与html dom不同，因此jquerys事件失败了。

jQuery Selector + SVG不兼容？

尝试处理svg元素上的点击事件时，该怎么办？

帮助非常感谢

Answer 1

如果你想使用你必须对svg内容进行点击处理，即public / img / nav / profile.svg等的根元素。

如果想要按原样保持处理，那么您需要使用元素作为容器而不是元素。 这有其自身的限制，例如没有脚本和没有后备。

第三种选择可能是在每个svg元素上放置一个绝对定位的透明div，并在其上处理onclick。

您必须选择最适合您需求的解决方案。