什么是JS事件冒泡？：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
阻止冒泡的方法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<input type="button" id="btn" value="点击">>
</div>
<script>
/**
* 当我们点击button时div也被执行了，但我们并没有点击div，这也就是事件的冒泡问题，从下往上执行
* 我们可以使用stopPropagation()方法阻止这样的发生
*/
document.getElementById("btn").addEventListener("click",fun)
document.getElementById("div").addEventListener("click",sun)
function fun(e) {
alert("button");
e.stopPropagation();//阻止冒泡问题的发生
}
function sun() {
alert("div");
}
</script>
</body>
</html>