如何添加或附加“点击”按钮DOM 中的事件监听器？

发布于 2024-10-25 00:30:17 字数 2590 浏览 0 评论 0原文

无法将事件添加到 ID。虽然能够在 onLoad 上附加事件侦听器，但对于 onClick 或 click 来说同样不起作用。有人可以帮我修复它吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/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>

PS 我不允许使用任何框架。仅在基于 WEBKIT 的移动浏览器和 Google Chrome 上进行测试

原文

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.org/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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染墨丶若流云 2024-11-01 00:30:17

使用 addEventListener（或 IE 的 attachEvent）不会更改 onclick 属性的内容 - 它们是独立的。
不需要延迟 loaded() 函数 - 只需执行以下操作即可：
window.addEventListener('load', returned, false);
如果您假设 W3C DOM 事件处理（您的 load 处理程序执行此操作），那么无需 IE-ony attachEvent() 调用