获得SVG元素 'id' 属性动态(谷歌SVG网页)
(使用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?
也许
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"));
}
这很可能是你得到比你期待着另一个目标。 “Seldom_Seen”元素中的所有元素都有ID吗?你可以随时提醒目标,看看它是什么类型的元素。
在<g>
元素上也有一些与mouseover/mouseout有关的陷阱,事件冒泡,你可能会得到它们两次,除非你做了一些过滤。有关可能的解决方法,请参见slides 17 and 18 here。
有趣。我不确定如何执行“过滤”。调用e.currentTarget.id为我工作。但我不知道事件冒泡是否仍然会导致一些问题。 – Chris 2010-07-06 15:01:18
如果'g'内有多个要捕获事件的元素,但也可以捕获'g'事件,那么您可能需要担心这一点。否则,你应该全部设置。 – 2010-07-06 18:01:36
这工作:e.currentTarget.id 谢谢! – Chris 2010-07-06 15:01:54