[英]Javascript Event Bubbling Not Working As Expected
有一个噩梦试图找出事件冒泡..
<html>
<head>
<script type="text/javascript">
function $(ob) { return document.getElementById(ob) }
function bodyClick()
{
$('win_clicks').value = parseInt($('win_clicks').value) + 1;
}
window.addEventListener('load',function(e)
{
$('bl_lnk').addEventListener('click',function (e)
{
$('bl_lnk_clicks').value = parseInt($('bl_lnk_clicks').value) + 1;
}, true);
$('rd_lnk').addEventListener('click',function (e)
{
$('rd_lnk_clicks').value = parseInt($('rd_lnk_clicks').value) + 1;
}, false);
}, false);
</script>
</head>
<body onclick="bodyClick();" style="font:16px Tahoma">
<div id="bl_lnk" style="position:absolute; width:250px; top:100px; left:50%; margin-left:-125px; padding:20px; background:#AAFFFF; border:1px solid #55AAFF; text-align:center; cursor:pointer">
I'm a link, Click me! and me!
</div>
<div id="rd_lnk" style="-moz-border-radius:40px; border-radius:50px; position:absolute; width:60px; height:40px; top:103px; left:50%; margin-left:77px; padding:5px; border:3px solid #FF6666; cursor:pointer"></div>
<div style="position:absolute; width:250px; top:200px; left:50%; margin-left:-125px; padding:20px; background:#fff6bf; border:1px solid #FFD324;">
<table cellspacing="10">
<tr>
<td>Blue Link Clicks:</td>
<td><input type="text" id="bl_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td>
</tr>
<tr>
<td>Red Link Clicks:</td>
<td><input type="text" id="rd_lnk_clicks" value="0" style="width:35px; border:0; background:transparent" /></td>
</tr>
<tr>
<td>Body Clicks:</td>
<td><input type="text" id="win_clicks" value="0" style="width:35px; border:0; background:transparent" /></td>
</tr>
</table>
</div>
</body>
</html>
据我了解,点击红色边框内的区域应该触发所有 3 个事件处理程序(红色、蓝色和身体),只有红色和身体被触发。
我尝试更改addEventListener
的第三个值并更改返回值但无济于事,有什么想法吗?
红色 div 应该在内部(结构上在您的 HTML 中,而不是视觉上)以便事件传播到蓝色 div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.