好的,我正在 try catch 菜单项上的点击事件
这是我的 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 元素上的点击事件时该怎么做?
非常感谢您的帮助
最佳答案
如果你想使用<object>
您必须将点击处理放在 svg 内容上,即 <svg>
public/img/nav/profile.svg 等的根元素
如果想保持处理原样,那么您需要使用 <image>
元素为 <svg>
容器而不是 <object>
元素。尽管它有自己的限制,例如没有脚本和没有回退。
第三种选择可能是在每个 svg 元素上放置一个绝对定位的透明 div,并在其上处理 onclick。
您必须选择最适合您需求的解决方案。
关于JQuery + SVG 对象 : Capture click event properly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13237995/