jQuery SVG对象:正确捕获单击事件

Question

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

这是我的html：

<nav>
<ul>
    <li class="active left" id="profileLink">
        <object type="image/svg+xml" data="public/img/nav/profile.svg">    
                <img src="public/img/nav/profile.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="left" id="suggestionsLink">
        <object type="image/svg+xml" data="public/img/nav/suggestions.svg">    
                <img src="public/img/nav/suggestions.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="settingsLink">
        <object type="image/svg+xml" data="public/img/nav/settings.svg">    
                <img src="public/img/nav/settings.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="right" id="statisticsLink">
        <object type="image/svg+xml" data="public/img/nav/statistics.svg">    
                <img src="public/img/nav/statistics.png" alt="Blue Square"/>     
        </object>
    </li>
    <li class="middle" id="friendsLink">
        <object type="image/svg+xml" data="public/img/nav/friends.svg">    
                <img src="public/img/nav/friends.png" alt="Blue Square"/>     
        </object>
    </li>
</ul>

这是我正在使用的脚本：

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

当我使用脚本选择一个普通的A-TAG时，它可以正常工作，但是在此SVG对象上，它根本不起作用。请注意，在单击Li-Element的填充区域时确实有效。但是在单击SVG图像区域时不会。

此线程中的一个帖子表明SVG DOM与HTML DOM不同，因此Jquerys事件失败了。

jQuery选择器 SVG不兼容？

尝试处理SVG元素上的单击事件时有什么路要走？

帮助您非常感谢

Answer 1

如果要使用 <object>，则必须将单击"命令"放在svg内容上，即public/img/img/nav/profile.svg的 <svg> root element.svg等。

如果要保持处理原样，则需要将<image>元素用作<svg>容器而不是<object>元素。这带来了自己的限制，尽管没有脚本和没有后备。

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

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