您的位置：首页 > Web前端 > JavaScript

js 事件冒泡测试

2016-03-29 13:05 337 查看

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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 事件冒泡

相关文章推荐

新的分享

章节导航

js 事件冒泡 测试

js 事件冒泡测试