<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: white;
font-size: 30px;
}
#outer
{
width: 300px;
height: 300px;
background-color: yellow;
}
#center
{
width: 200px;
height: 200px;
background-color: red;
}
#inner
{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 祖先元素 -->
<div id="outer">
outer
<!-- 父元素 -->
<div id="center">
center
<div id="inner">inner</div>
</div>
</div>
<script>
var outer=document.getElementById('outer');
var center=document.getElementById('center');
var inner=document.getElementById('inner');
// 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
// inner.onclick = function () {
// console.log('我是inner点击的');
// }
// 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
inner.οnclick=function(event)
{
console.log('inner');
//阻止事件冒泡发生
//event.stopPropagation();
//如果不开启event.stopPropagation(),那么点击蓝色div的结果如图所示
反之 开启结果如图所示
}
center.οnclick=function()
{
console.log('center');
// event.stopPropagation();
}
outer.οnclick=function()
{
console.log('outer');
// event.stopPropagation();
}
</script>
</body>
</html>
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
