2010-07-02 324 views
0

(使用http://code.google.com/p/svgweb/獲得SVG元素 'id' 屬性動態(谷歌SVG網頁)

window.onsvgload = function() { 
    function onEnter(e) {   
    var targ; 
    if (!e) var e = window.event; 
    if (e.target) targ = e.target; 
    else if (e.srcElement) targ = e.srcElement; 
    if (targ.nodeType == 3) // defeat Safari bug 
     targ = targ.parentNode; 

    alert(targ.hasAttributeNS(null, 'id')); //displays false 
    alert(targ.getAttributeNS(null, 'id')); //displays a blank dialog 
    alert(targ.id); //displays a blank dialog 
    } 

    /* Seldom_Seen is a group element in the SVG - <g id="Seldom_Seen">... */ 
    document.getElementById('Seldom_Seen').addEventListener("mouseover", onEnter, false); //alert is blank 
    document.getElementById('normal_dom_element').addEventListener("mouseover", onEnter, false); //alert displays id as expected 
} 

事件監聽SVG元素的作品。我似乎無法得到身份證。我可以獲得其他對象屬性,如x,y值。無論如何獲得目標元素的ID?

回答

1

也許

e.currentTarget 

但與jQuery,那簡直是

window.onsvgload = function() { 
    $('#Seldom_Seen').mouseover(function(){ onEnter(this); }); 
    $('#normal_dom_element').mouseover(function(){ onEnter(this); }); 
} 

function onEnter(obj) { 
    alert($(obj).attr("id")); 
} 
+0

這工作:e.currentTarget.id 謝謝! – Chris 2010-07-06 15:01:54

1

這很可能是你得到比你期待着另一個目標。 「Seldom_Seen」元素中的所有元素都有ID嗎?你可以隨時提醒目標,看看它是什麼類型的元素。

<g>元素上也有一些與mouseover/mouseout有關的陷阱,事件冒泡,你可能會得到它們兩次,除非你做了一些過濾。有關可能的解決方法,請參見slides 17 and 18 here

+0

有趣。我不確定如何執行「過濾」。調用e.currentTarget.id爲我工作。但我不知道事件冒泡是否仍然會導致一些問題。 – Chris 2010-07-06 15:01:18

+0

如果'g'內有多個要捕獲事件的元素,但也可以捕獲'g'事件,那麼您可能需要擔心這一點。否則,你應該全部設置。 – 2010-07-06 18:01:36