Add event listener to svg group element?
2,508 views
Skip to first unread message
z1freeride
Jun 30, 2010, 4:19:41 PM6/30/10
to SVG Web
Is it possible to add an event listener to a group object?
<script>
function onEnter(ev) {
alert(ev);
}
$(document).ready(function(){
document.getElementById('Seldom_Seen').addEventListener("mouseover",
onEnter, false);
});
</script>
<svg>
<g id="Seldom_Seen">
...
</g>
</svg>
Is this correct syntax? I can't seem to get the alert to show.
<script>
function onEnter(ev) {
alert(ev);
}
$(document).ready(function(){
document.getElementById('Seldom_Seen').addEventListener("mouseover",
onEnter, false);
});
</script>
<svg>
<g id="Seldom_Seen">
...
</g>
</svg>
Is this correct syntax? I can't seem to get the alert to show.
z1freeride
Jul 1, 2010, 11:34:56 AM7/1/10
to SVG Web
var x = document.getElementById('Seldom_Seen');
alert(x);
x.addEventListener("mouseover", onEnter, false);
alert('test123');
The first alert displays '[object SVGGElement]' but the second alert
does not show. So the third line is breaking somehow. Any ideas?
alert(x);
x.addEventListener("mouseover", onEnter, false);
alert('test123');
The first alert displays '[object SVGGElement]' but the second alert
does not show. So the third line is breaking somehow. Any ideas?
z1freeride
Jul 1, 2010, 11:48:20 AM7/1/10
to SVG Web
Oops, I had the function names mismatched for my second post (onEnter
vs onEnterImage). The first post issue is still a problem however.
vs onEnterImage). The first post issue is still a problem however.
R. Masters
Jul 1, 2010, 12:48:09 PM7/1/10
to svg...@googlegroups.com
SVG Web does not load until very late.
Instead of using jquery's document ready, use window.onsvgload or svgweb.addOnLoad(). That's in the user manual.
If that does not work, let us know.
Rick
--
You received this message because you are subscribed to the Google Groups "SVG Web" group.
To post to this group, send email to svg...@googlegroups.com.
To unsubscribe from this group, send email to svg-web+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/svg-web?hl=en.
z1freeride
Jul 1, 2010, 1:37:18 PM7/1/10
to SVG Web
Ah shoot. I think it's because I have the svg, javascript, etc inside
an iframe. It appears to work if I load the inner html file.
On Jul 1, 10:48 am, "R. Masters" <gric...@gmail.com> wrote:
> SVG Web does not load until very late.
> Instead of using jquery's document ready, use window.onsvgload or
> svgweb.addOnLoad(). That's in the user manual.
> If that does not work, let us know.
>
> Rick
>
> > svg-web+u...@googlegroups.com<svg-web%2Bunsu...@googlegroups.com>
> > .
an iframe. It appears to work if I load the inner html file.
On Jul 1, 10:48 am, "R. Masters" <gric...@gmail.com> wrote:
> SVG Web does not load until very late.
> Instead of using jquery's document ready, use window.onsvgload or
> svgweb.addOnLoad(). That's in the user manual.
> If that does not work, let us know.
>
> Rick
>
> > .
Bradley Neuberg
Jul 1, 2010, 9:12:51 PM7/1/10
to svg...@googlegroups.com
Also, it looks like you aren't nesting your SVG inside of the HTML page in a <script type="image/svg+xml"> block:
<html>
<body>
<script type="image/svg+xml">
<svg>
<circle/>
</svg>
</script>
</body>
</html>
<html>
<body>
<script type="image/svg+xml">
<svg>
<circle/>
</svg>
</script>
</body>
</html>
To unsubscribe from this group, send email to svg-web+u...@googlegroups.com.
z1freeride
Jul 2, 2010, 2:57:13 PM7/2/10
to SVG Web
Thanks for the replies. I indeed do have the svg encased with <script
type="image/svg+xml">.
Is it possible to get the svg object id from the event argument?
function onEnter(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
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(posx + ' ' + posy + ' ' + targ.id ); //targ.id appears to be
empty?
> > <svg-web%2Bunsu...@googlegroups.com<svg-web%252Buns...@googlegroups.com>
type="image/svg+xml">.
Is it possible to get the svg object id from the event argument?
function onEnter(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
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(posx + ' ' + posy + ' ' + targ.id ); //targ.id appears to be
empty?
}
On Jul 1, 7:12 pm, Bradley Neuberg <bradneub...@gmail.com> wrote:
> Also, it looks like you aren't nesting your SVG inside of the HTML page in a
> <script type="image/svg+xml"> block:
>
> <html>
> <body>
> <script type="image/svg+xml">
> <svg>
> <circle/>
> </svg>
> </script>
> </body>
> </html>
>
On Jul 1, 7:12 pm, Bradley Neuberg <bradneub...@gmail.com> wrote:
> Also, it looks like you aren't nesting your SVG inside of the HTML page in a
> <script type="image/svg+xml"> block:
>
> <html>
> <body>
> <script type="image/svg+xml">
> <svg>
> <circle/>
> </svg>
> </script>
> </body>
> </html>
>
z1freeride
Jul 2, 2010, 5:12:40 PM7/2/10
to SVG Web
targ.getAttributeNS(null, 'id') appears to not work as well.
z1freeride
Jul 6, 2010, 11:08:43 AM7/6/10
to SVG Web
e.currentTarget.id worked for me. See
http://stackoverflow.com/questions/3169497/obtaining-svg-element-id-attribute-dynamically-google-svg-web
http://stackoverflow.com/questions/3169497/obtaining-svg-element-id-attribute-dynamically-google-svg-web
Reply all
Reply to author
Forward
0 new messages