<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>避免事件冒泡
</title>
<style>
#box1{width:150px;height:150px;background:red;}
#box2{width:100px;height:100px;background:yellow;}
#box3{width:50px;height:50px;background:green;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script>
document.getElementById('box1').onclick = function(e){
this.style.backgroundColor = 'green';
};
document.getElementById('box2').onclick = function(e){
this.style.backgroundColor = 'red';
event.cancelBubble = true;
};
document.getElementById('box3').onclick = function(e){
this.style.backgroundColor = 'yellow';
var ev = e || event;
ev.cancelBubble = true;
};
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-84809.html
