js 事件冒泡 测试
原创
©著作权归作者所有:来自51CTO博客作者RandTsui的原创作品,请联系作者获取转载授权,否则将追究法律责任
js 写多了 回头看看这个事件冒泡 没啥意思 但是也整理一下
注意 addEventListener 的第三个参数
还有 这个不是问题 也不是缺陷 只是一个机制
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/JavaScript6.js"></script>
<link href="../Content/StyleSheet6.css" rel="stylesheet" />
</head>
<body>
<div id="id1">
<div id="id2"></div>
</div>
</body>
</html>
js
window.onload = function () {
document.getElementById('id1').addEventListener('click', function () { alert('id1'); }, false);
document.getElementById('id2').addEventListener('click', function () { alert('id2'); }, false);
};
css
body {
}
#id1 {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
background-color: blue;
z-index: 4;
cursor:pointer;
}
#id2 {
width: 200px;
height: 200px;
position: absolute;
top: 20px;
left: 70px;
background-color: green;
z-index: 1;
cursor:pointer;
}