HTML+SVG+event listener
"Jean-Claude Moissinac [email protected] [svg-developers]" <[email protected]> Mon, 23 Mar 2015 17:07:46 +0100
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <CAP8HVi1Macc8-=HBAbjSo8j43wYY7OCa-RT=rekS7T0LEpLiGg@mail.gmail.com> |
--001a11432238219f160511f6df40
Content-Type: text/plain; charset=UTF-8
I'm disturbed by the following small and simple code which seems correct to
me and if it works, must popup an alert each time a key is pressed; but it
doesn't work. Any comments? Why that code is false?
<html encoding="UTF-8" >
<head>
<script type="text/javascript">
function init()
{
var root = document.getElementById("root");
root.addEventListener("keydown", function(evt) { alert(evt); }, true);
}
</script>
</head>
<body onload="init()">
<svg id="root" xmlns="http://www.w3.org/2000/svg" width="100%"
height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="blue" />
</svg>
</body>
</html>
--
Jean-Claude Moissinac <http://moissinac.wp.mines-telecom.fr/>
--001a11432238219f160511f6df40
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<head>
<style type=3D"text/css">
<!--
/* start of attachment style */
.ygrp-photo-title{
clear: both;
font-size: smaller;
height: 15px;
overflow: hidden;
text-align: center;
width: 75px;
}
div.ygrp-photo{
background-position: center;
background-repeat: no-repeat;
background-color: white;
border: 1px solid black;
height: 62px;
width: 62px;
}
div.photo-title=20
a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
text-decoration: none;=20
}
div.attach-table div.attach-row {
clear: both;
}
div.attach-table div.attach-row div {
float: left;
/* margin: 2px;*/
}
p {
clear: both;
padding: 15px 0 3px 0;
overflow: hidden;
}
div.ygrp-file {
width: 30px;
valign: middle;
}
div.attach-table div.attach-row div div a {
text-decoration: none;
}
div.attach-table div.attach-row div div span {
font-weight: normal;
}
div.ygrp-file-title {
font-weight: bold;
}
/* end of attachment style */
-->
</style>
</head>
<html>
<head>
<style type=3D"text/css">
<!--
#ygrp-mkp {
border: 1px solid #d8d8d8;
font-family: Arial;
margin: 10px 0;
padding: 0 10px;
}
#ygrp-mkp hr {
border: 1px solid #d8d8d8;
}
#ygrp-mkp #hd {
color: #628c2a;
font-size: 85%;
font-weight: 700;
line-height: 122%;
margin: 10px 0;
}
#ygrp-mkp #ads {
margin-bottom: 10px;
}
#ygrp-mkp .ad {
padding: 0 0;
}
#ygrp-mkp .ad p {
margin: 0;
}
#ygrp-mkp .ad a {
color: #0000ff;
text-decoration: none;
}
-->
</style>
</head>
<body>
<!-- |**|begin egp html banner|**| -->
<br><br>
<!-- |**|end egp html banner|**| -->
<div dir=3D"ltr"><div class=3D"gmail_default" style=3D"font-size:small"><br=
style=3D"font-size:12.8000001907349px"><div dir=3D"ltr" style=3D"font-size=
:12.8000001907349px"><div class=3D"gmail_default" style=3D"font-size:small"=
>I'm disturbed by the following small and simple code which seems corre=
ct to me and if it works, must popup an alert each time a key is pressed; b=
ut it doesn't work. Any comments? Why that code is false?</div><div cla=
ss=3D"gmail_default" style=3D"font-size:small"><br></div><div class=3D"gmai=
l_default"><div class=3D"gmail_default"><html encoding=3D"UTF-8&quo=
t; ></div><div class=3D"gmail_default"><head></div><div class=3D"g=
mail_default">=C2=A0 =C2=A0 <script<span style=3D"white-space:pre-wrap">=
</span>=C2=A0=C2=A0type=3D"text/javascript"></div><div class=
=3D"gmail_default">=C2=A0 =C2=A0 =C2=A0 function init()<br></div><div class=
=3D"gmail_default">=C2=A0 =C2=A0 =C2=A0 {</div><div class=3D"gmail_default"=
>=C2=A0 =C2=A0=C2=A0<span style=3D"white-space:pre-wrap"> </span>var root =
=3D document.getElementById("root");</div><div class=3D"gmail_def=
ault">=C2=A0 =C2=A0=C2=A0<span style=3D"white-space:pre-wrap"> </span>root=
.addEventListener("keydown", function(evt) { alert(evt); }, true)=
;</div><div class=3D"gmail_default">=C2=A0 =C2=A0 =C2=A0 }</div><div class=
=3D"gmail_default">=C2=A0 =C2=A0 </script></div><div class=3D"gmail_d=
efault"></head></div><div class=3D"gmail_default"><body =C2=A0onlo=
ad=3D"init()"></div><div class=3D"gmail_default">=C2=A0 =C2=A0=
<svg id=3D"root" xmlns=3D"<a href=3D"http://www.w3.org/2=
000/svg" target=3D"_blank">http://www.w3.org/2000/svg</a>" =C2=A0width=
=3D"100%" height=3D"100%"></div><div class=3D"gmail_=
default">=C2=A0 =C2=A0 =C2=A0 =C2=A0 =C2=A0<rect x=3D"0" y=3D&=
quot;0" width=3D"100%" height=3D"100%" fill=3D&quo=
t;blue" /></div><div class=3D"gmail_default">=C2=A0 =C2=A0 </svg=
></div><div class=3D"gmail_default"></body><span style=3D"white-sp=
ace:pre-wrap"> </span></div><div class=3D"gmail_default"></html></div=
></div></div></div><br clear=3D"all"><div><div class=3D"gmail_signature"><d=
iv dir=3D"ltr">--<br><a href=3D"http://moissinac.wp.mines-telecom.fr/" targ=
et=3D"_blank">Jean-Claude Moissinac</a><br></div></div></div>
</div>
<!-- |**|begin egp html banner|**| -->
<br>
<br>
<!-- |**|end egp html banner|**| -->
<div width=3D"1" style=3D"color: white; clear: both;"/>__._,_.___</div>
=20=20=20=20=20=20
=20=20
=20=20=20=20
<div id=3D"fromDMARC" style=3D"clear:both; margin-top: 10px;">
<hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgroun=
d-color:#E3E3E3;">
Posted by: Jean-Claude Moissinac <[email protected]> =
<hr style=3D"height:2px ; border-width:0; color:#E3E3E3; background-color:=
#E3E3E3;">
</div>
<!-- Start Recommendations -->
<!-- End Recommendations -->
<!-- |**|begin egp html banner|**| -->
<br><br>
<tt>
-----<BR>
To unsubscribe send a message to: [email protected]=
m<BR>
-or-<BR>
visit <a href=3D"http://groups.yahoo.com/group/svg-developers">http://group=
s.yahoo.com/group/svg-developers</a> and click "edit my membership&quo=
t;<BR>
----</tt>
<br><br>
<!-- |**|end egp html banner|**| -->
<!-- |**|begin egp html banner|**| -->
<img src=3D"http://geo.yahoo.com/serv?s=3D97476590/grpId=3D1298421/grpspI=
d=3D1706030390/msgId=3D66471/stime=3D1427126916" width=3D"1" height=3D"1"> =
<br>
<!-- |**|end egp html banner|**| -->
=20=20
<!-- |**|begin egp html banner|**| -->
<br>
=20=20=20
=20=20=20=20=20
=20
<!-- |**|begin egp html banner|**| -->
<div id=3D"ygrp-vital" style=3D"background-color: #f2f2f2; font-fam=
ily: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;">
<span id=3D"vithd" style=3D"font-weight: bold; color: #333; text-tr=
ansform: uppercase; "><a href=3D"https://groups.yahoo.com/neo/groups/svg-de=
velopers/info;_ylc=3DX3oDMTJlZTZwc2kyBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3=
Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQyNzEyNjkxNg--" sty=
le=3D"text-decoration: none;">Visit Your Group</a></span>
<ul style=3D"list-style-type: none; margin: 0; padding: 0; display: in=
line;">
</ul>
</div>
<div id=3D"ft" style=3D"font-family: Arial; font-size: 11px; margin-top: 5p=
x; padding: 0 2px 0 0; clear: both;">
<a href=3D"https://groups.yahoo.com/neo;_ylc=3DX3oDMTJkZmEya2Q4BF9TAzk3ND=
c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd=
GltZQMxNDI3MTI2OTE2" style=3D"float: left;"><img src=3D"http://l.yimg.com/r=
u/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height=3D"15"=
width=3D"137" alt=3D"Yahoo! Groups" style=3D"border: 0;"/></a>
<div style=3D"color: #747575; float: right;"> • <a href=3D"https://i=
nfo.yahoo.com/privacy/us/yahoo/groups/details.html" style=3D"text-decoratio=
n: none;">Privacy</a> • <a href=3D"mailto:svg-developers-unsubscribe@y=
ahoogroups.com?subject=3DUnsubscribe" style=3D"text-decoration: none;">Unsu=
bscribe</a> • <a href=3D"https://info.yahoo.com/legal/us/yahoo/utos/te=
rms/" style=3D"text-decoration: none;">Terms of Use</a> </div>
</div>
<!-- |**|end egp html banner|**| -->
</div> <!-- ygrp-msg -->
=20=20=20
<br>
<!-- |**|end egp html banner|**| -->
<div style=3D"color: white; clear: both;"/>__,_._,___</div>
</body>
</html>
--001a11432238219f160511f6df40--