JQuery + SVG对象：正确捕获点击事件 [英] JQuery + SVG object: Capture click event properly

问题描述

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

Ok, i'm trying to capture click events on menu items

这是我的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区域时没有。

When i use the script to select a plain a-tag it works just fine, but on this svg object it doesn't work at all. Note that it does work when clicking on the padding area of the li-element. but not when clicking in the svg-image area.

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

A post in this thread suggests the svg dom is different from the html dom and thus jquerys events fail.

jQuery Selector + SVG不兼容？

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

What is the way to go when trying to handle click events on svg elements?

非常感谢帮助

推荐答案

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

If you want to use <object> you'll have to put the click handling on the svg contents i.e. the <svg> root element of public/img/nav/profile.svg etc.

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

If want to keep the handling as-is then you'll need to use an <image> element as the <svg> container rather than an <object> element. That comes with its own restrictions though such as no scripting and no fallback.

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

A third option might be to put an absolutely positioned transparent div over each svg element and have the onclick handled on that.

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

You'll have to chose whatever solution fits your needs best.

这篇关于JQuery + SVG对象：正确捕获点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！