Javascript 事件冒泡未按预期工作
试图弄清楚事件冒泡是一场噩梦。
<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 的第三个值并更改返回值但无济于事，有什么想法吗？
Having a nightmare trying to figure out event Bubbling..
<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>
From what I understand clicking in the area inside the red border should trigger all 3 event handlers (red, blue & body), only red and body are triggered..
I have tried altering the third value of addEventListener and changing the return values but to no avail, any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
红色 div 应该位于内部（结构上在 HTML 中，而不是视觉上），以便事件传播到蓝色 div。
The red div should be inside (structurally in your HTML, not visually) for the event to propagate to the blue div.