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元素的填充区域时，它确实有效。但在点击svg-image区域时却没有。

此帖子中的帖子表明svg dom与html dom不同，因此jquerys事件失败。

jQuery Selector + SVG Incompatible?

尝试处理svg元素上的点击事件时有什么方法？

非常感谢帮助

Answer 1

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

如果要按原样保持处理，则需要使用<image>元素作为<svg>容器，而不是<object>元素。这有其自身的限制，例如没有脚本和没有后备。

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

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

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

1 个答案: