事件冒泡
2019-07-22 本文已影响0人
Hello杨先生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
.no1{
width: 600px;
height: 600px;
border: 1px solid red;
margin-left: 20px;
}
.no2{
width: 450px;
height: 450px;
border: 1px solid orange;
margin-left: 20px;
}
.no3{
width: 200px;
height: 200px;
border:1px solid black;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="no1" onclick="show1()">
一
<div class="no2" onclick="show2()">
二
<div class="no3" onclick="show3()">
三
</div>
</div>
</div>
<script>
function show1() {
console.log("show1")
}
function show2(e) {
console.log("show2")
var myEvent = e||event
if(myEvent.stopPropagation) myEvent.stopPropagation()
else myEvent.cancelBubble = true//兼容ie
}
function show3(e) {
console.log("show3")
var myEvent = e||event
if(myEvent.stopPropagation) myEvent.stopPropagation()
else myEvent.cancelBubble = true//兼容ie
}
</script>
</body>
</html>
image.png
