<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 300px;
height: 300px;
background: pink;
}
.div2{
width: 200px;
height: 200px;
background: blue;
}
.div3{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<div class="div2" id="div2">
<div class="div3" id="div3"></div>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id)
}
var div1Obj = my$('div1')
div1Obj.onclick = function(event){
console.log('我是div1')
}
var div2Obj = my$('div2')
div2Obj.onclick = function(e){
console.log('我是div2')
if(e && e.stopPropagation){
console.log('我是支持e 和 e.stopProgation 谷歌和火狐')
e.stopPropagation()
}else{
console.log('我是不支持e 和 e.stopProgation IE')
window.event.cancelBubble = true
}
}
var div3Obj = my$('div3')
div3Obj.onclick = function(){
console.log('我是div3')
}
</script>
</body>
</html>
相关文章：