Am not able to add events to a id. Though able to attach event listener onLoad but same not working for onClick or click. Can somebody help me to fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" id="iphone-viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<title>Astro Wheel</title>
<script type="text/javascript">
function loaded() {
alert("Loaded")
var ele= document.getElementById("aries");
if (window.attachEvent)
{ ele.attachEvent('click', testFunction); }
else if (window.addEventListener)
{ ele.addEventListener('click', testFunction, true); }
// I am unable to register a event on #aries, below alerts giving "null" and "undefined" respectively
alert(ele.onclick);
alert(ele.click)
}
function testFunction(){
alert("Clicked")
}
window.addEventListener("load", function() { setTimeout(loaded, 100); }, true);
</script>
<style type="text/css">
body, ul, li, div, p { padding:0; margin:0; }
body { background:#444 url(bg.png); }
#wheel { position:absolute; z-index:1; width:320px; height:321px; overflow:hidden; }
#display1 { position:absolute; z-index:100; width:320px; height:321px; }
ul { position:absolute; z-index:10; width:320px; height:320px;
-webkit-transform-origin:50% 50%;
-webkit-transform:rotateZ(0rad);
text-align:center;
}
ul li { position:absolute; z-index:11; width:76px; height:88px; left:122px; top:22px; overflow:hidden;
-webkit-transform-origin:38px 138px;
-webkit-transition-timing-function:ease-out;
-webkit-transition-duration:800ms;
}
#aries {-webkit-transform:rotate(0deg) translate(0, -0px); }
#cancer {-webkit-transform:rotate(90deg) translate(0, -000px); }
#libra {-webkit-transform:rotate(180deg) translate(0, -0000px); }
#caprico { -webkit-transform:rotate(270deg) translate(0, -000px); }
</style>
</head>
<body>
<div id="wheel">
<div id="display1"></div>
<ul id="zodiac">
<li id="aries"><div>Aries</div></li>
<li id="cancer"><div>Cancer</div></li>
<li id="libra"><div>Libra</div></li>
<li id="caprico"><div>Caprico</div></li>
</ul>
<div id="ok"></div>
</div>
</body>
</html>
P.S. I am not allowed to use any framework.Testing on WEBKIT based mobile browser and Google Chrome only
Am not able to add events to a id. Though able to attach event listener onLoad but same not working for onClick or click. Can somebody help me to fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" id="iphone-viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<title>Astro Wheel</title>
<script type="text/javascript">
function loaded() {
alert("Loaded")
var ele= document.getElementById("aries");
if (window.attachEvent)
{ ele.attachEvent('click', testFunction); }
else if (window.addEventListener)
{ ele.addEventListener('click', testFunction, true); }
// I am unable to register a event on #aries, below alerts giving "null" and "undefined" respectively
alert(ele.onclick);
alert(ele.click)
}
function testFunction(){
alert("Clicked")
}
window.addEventListener("load", function() { setTimeout(loaded, 100); }, true);
</script>
<style type="text/css">
body, ul, li, div, p { padding:0; margin:0; }
body { background:#444 url(bg.png); }
#wheel { position:absolute; z-index:1; width:320px; height:321px; overflow:hidden; }
#display1 { position:absolute; z-index:100; width:320px; height:321px; }
ul { position:absolute; z-index:10; width:320px; height:320px;
-webkit-transform-origin:50% 50%;
-webkit-transform:rotateZ(0rad);
text-align:center;
}
ul li { position:absolute; z-index:11; width:76px; height:88px; left:122px; top:22px; overflow:hidden;
-webkit-transform-origin:38px 138px;
-webkit-transition-timing-function:ease-out;
-webkit-transition-duration:800ms;
}
#aries {-webkit-transform:rotate(0deg) translate(0, -0px); }
#cancer {-webkit-transform:rotate(90deg) translate(0, -000px); }
#libra {-webkit-transform:rotate(180deg) translate(0, -0000px); }
#caprico { -webkit-transform:rotate(270deg) translate(0, -000px); }
</style>
</head>
<body>
<div id="wheel">
<div id="display1"></div>
<ul id="zodiac">
<li id="aries"><div>Aries</div></li>
<li id="cancer"><div>Cancer</div></li>
<li id="libra"><div>Libra</div></li>
<li id="caprico"><div>Caprico</div></li>
</ul>
<div id="ok"></div>
</div>
</body>
</html>
P.S. I am not allowed to use any framework.Testing on WEBKIT based mobile browser and Google Chrome only
Share Improve this question edited Mar 20, 2011 at 17:34 Ashish Agarwal asked Mar 20, 2011 at 15:03 Ashish AgarwalAshish Agarwal 6,28313 gold badges61 silver badges92 bronze badges 8- 2 I feel this should be posted on Stack Overflow. Code Review is for reviewing working code. – Steven Jeuris Commented Mar 20, 2011 at 15:10
- 1 If your question is "How do I..." then what you're asking for is not a review. This belongs on Stack Overflow. – sepp2k Commented Mar 20, 2011 at 15:12
- Can any body please tell me as where am going wrong. I have updated testings info. – Ashish Agarwal Commented Mar 20, 2011 at 17:44
-
To be honest I'm not sure. If I put the click handler on "display1" it works, but not on the
<li>tags. – Alnitak Commented Mar 20, 2011 at 18:19 -
1
it's your
#display1class - it has a high zorder so overlays the other divs, preventing them from being clicked. – Alnitak Commented Mar 20, 2011 at 18:28
1 Answer
Reset to default 3Using
addEventListener(or IE'sattachEvent) doesn't change the contents of theonclickattribute - they're independent.There shouldn't be any need to time delay the
loaded()function - just do:window.addEventListener('load', loaded, false);If you're assuming W3C DOM event handling (which your
loadhandler does) then there's no need for the IE-onyattachEvent()call
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744928657a4601598.html
评论列表（0条）