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> 

而這裏的劇本我」使用L：

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

當我使用腳本來選擇平原標記它工作得很好，但在這SVG反對它根本不起作用。請注意，單擊li元素的填充區域時它可以工作。但在svg-image區域中單擊時不會。

本帖子中的帖子提示svg dom與html dom不同，因此jquerys事件失敗。

jQuery Selector + SVG Incompatible?

什麼是試圖處理點擊SVG元素活動時，要走的路？

幫助嚴重讚賞

Answer 1

如果你想使用<object>你就必須把點擊操作的SVG內容，即公共/ IMG/NAV的<svg>根元素/ profile.svg等

如果要保持原樣處理，則需要使用<image>元素作爲<svg>容器，而不是<object>元素。這有自己的限制，但沒有腳本，也沒有後備。

第三個選項可能是在每個svg元素上放置一個絕對定位的透明div，並且onclick在該處處理。

您必須選擇最適合您需求的解決方案。