Darryl Watson wrote:
>
> Hello again-
>
> I'm using IE6 and ASV 3.03.
>
> I think I'm struggling with some misconceptions about how events
work in
> SVG. I have an embedded SVG document, and most of the time, I
have a
> common set of onclick and onmouseover handlers defined on the SVG
tag of
> the document, which reference inline JS code. Thus:
>
> <svg id="SVGDoc" onclick="internal_click(evt);"
> onmouseover="internal_mouseover(evt);" ... >
>
> I also have what I am calling 'external' javascript, which is code
> included in the HTMl document containing the SVG embed. So I have
that
> across-the-embed thing going for me. :)
>
> Anyway, under certain conditions, I'd like to disable or redefine
the
> document's internal event handlers and call external routines
instead.
> Because this gets triggered by a button click in the parent HTML,
I'd
> like to redefine these event handlers in the parent HTML. So I am
> trying to do something like this:
>
> function onclick_change(e)
> {
> var embed = document.getElementById('SVGEmbed');
> var svgdoc = embed.getSVGDocument();
> var svgroot = svgdoc.getDocumentElement();
>
> svgroot.onclick=null; // I've also tried
svgdoc here...
> svgroot.onmouseover=null;
> svgdoc.getElementById('myTopLayer').onclick=function() {
> top.external_click(evt); };
> }
>
> No joy. I'm not disabling the SVG document event handlers, and
> therefore my top layer event handlers don't get called. I've
tried to
> use setAttributeNS calls as well, without success. I suspect I'm
not
> pointing to the right DOM elements... got any hints about how to
do this?
>
> Thanks!
>
Hi Darryl,
Try this: Place both functions in the HTML. I normally do not put
functions in the SVG, unless absolutely necessary. It's easier for
debugging if I have all functions in HTML
EXAMPLE:
HTML file:
<HTML>
<BODY onLoad=init()>
<embed name="svgEmbed" src="mySVG.svg" width="500" height="400"
type="image/svg+xml">
<br>
<button onClick=changeIt()>change</button>
<script>
var mySVG
function init()
{
docSVG=document.embeds["svgEmbed"].getSVGDocument()
mySVG=docSVG.getElementById("mySVG")
}
//--- mySVG initial onclick----
function internalClick()
{
alert("Internal")
}
function externalClick()
{
alert("external")
}
//---button for test(toggle)---
function changeIt()
{
if(mySVG.getAttribute("onclick")=="internalClick()")
mySVG.setAttribute("onclick","externalClick()")
else
mySVG.setAttribute("onclick","internalClick()")
}
</script>
</BODY>
</HTML>
mySVG.svg file:
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"; >
<svg width="500" height="400" id="mySVG" onclick="internalClick()" >
<rect x="0" y="0" width="500" height="400" fill="blue"/>
</svg>
This may not fully address what you want to do, but try it, and get
back if I missed your need.
Regards,
Francis
-----
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/
