Hi, Todd-
brunertodd wrote:
|
| Thanks for your responses. I think my problem has to do with
| my lack of understanding of the SVG DOM and event handling.
Yes. :)
But it's not the SVG DOM that you're struggling with. This particular
mechanism and architecture is also the DOM for HTML and any other XML
dialect, so you would do well to read up on the basics. There are many
tutorials available... you might look at W3Schools, for example.
| So what happens is that when I click on the polygon I get the
| output "The ID is poly." When I click on the text node 1, I
| get "The ID is text."
|
| Makes sense, but I what I really want is the id of the
| surrounding group (id="node1") to be returned. Is there a
| way to do that?
There are lots of ways to do that. :) In this case, the fact that there are
many ways to do so might add to your confusion....
Here's a few ways, so you can pick whatever works best for you:
1) Instead of:
var element = evt.target;
Use:
var element = evt.currentTarget;
This specifies the element that the event was set on, not the element that
first received the event. This is an effect of event bubbling.
2) Grab the event target like you're doing now, and navigate up to the
parentNode:
var element = evt.target;
var groupId = element.parentNode.id;
This has the advantage that you can make a generic function that does some
processing for you. For example, if you had a set of graphics that you
wanted to have this function handle, with different strutures, you could
make the appropriate choice in the script function. Consider a judicious use
of ids, where only the "top-level" element of a graphic has an id attribute:
<g onclick='GetTargetId(evt)'>
<g id='node1'>
<rect .../>
<text>my text</text>
</g>
<circle id='node2' .../>
</g>
function GetTargetId( evt )
{
var targetEl = evt.target;
var targetId = targetEl.id;
while ( !targetId )
{
targetEl = targetEl.parentNode;
targetId = targetEl.id;
}
if ( targetId )
{
alert( targetId );
}
};
GetTargetId will find the element with the id, and set that as the operative
element.
3) Since you have authored a nice SVG example with a good structure and a
'title' element, you can do a variation on the above:
function GetTargetTitle( evt )
{
var targetEl = evt.target;
var targetId = targetEl.id;
while ( targetEl && 'title' != targetEl.localName )
{
targetEl = targetEl.previousSibling;
}
if ( targetEl )
{
alert( targetEl.firstChild.nodeValue );
}
};
You could also test if the current element has a title, and if not, go up
the hierarchy and test each parent. That would be a little expensive, but
the method you would use is:
var allTitles = myElement.getElementsByTagNameNS(svgns, 'title');
if ( allTitles.item(0) )
{
var myTitle = allTitles.item(0);
}
| BTW, I'm using Firefox 1.5rc2 without a plugin if that makes
| a difference.
It doesn't. You might be using one UA (browser), but you don't know what
your users will be using.... it could be plugin, a phone, or something else.
Regards-
Doug
[EMAIL PROTECTED]
www.vectoreal.com ...for scalable solutions.
------------------------ Yahoo! Groups Sponsor --------------------~-->
Get Bzzzy! (real tools to help you find a job). Welcome to the Sweet Life.
http://us.click.yahoo.com/A77XvD/vlQLAA/TtwFAA/1U_rlB/TM
--------------------------------------------------------------------~->
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
