1.先看看常见的一种清除事件冒泡方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#upper{
width: 300px;
height: 300px;
background: red;
}
#center{
width: 200px;
height: 200px;
background: aqua;
}
#lower{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="upper">
<div id="center">
<div id="lower"></div>
</div>
</div>
<script>
var upper = document.getElementById('upper');
var center = document.getElementById('center');
var lower = document.getElementById('lower');
upper.onclick = function (ev) {
console.log('外');
};
center.onclick = function (ev) {
console.log('中');
ev.stopPropagation();
};
lower.onclick = function (ev) {
console.log('内');
ev.stopPropagation();
};
</script>
</body>
</html>
2.使用事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: antiquewhite;
}
#upper{
width: 300px;
height: 300px;
background: red;
}
#center{
width: 200px;
height: 200px;
background: aqua;
}
#lower{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="upper">
<div id="center">
<div id="lower"></div>
</div>
</div>
<script>
var upper = document.getElementById('upper');
var center = document.getElementById('center');
var lower = document.getElementById('lower');
var body = document.getElementsByTagName('body')[0];
body.onclick = function (ev) {
var ev = ev||window.event;
var target = ev.target||ev.srcElement;
switch (target.id){
case 'upper':
console.log('外');
break;
case 'center':
console.log('中');
break;
case 'lower':
console.log('内');
break;
}
};
</script>
</body>
</html>