JS阻止冒泡

js阻止冒泡

冒泡，顾名思义，就像是水里的泡泡慢慢向上浮动，并且是慢慢的变大。这和我们遇到的事件时一样的，再说直白一点就是儿子知道一件事，他会自动去告诉爸爸，爸爸又会去告诉爷爷，而这个自动就是系统默认的，所有我们就是要阻止系统的这一特点。

在冒泡的事件中，一般是使用嵌套的比较多，或者当我们给某一个或者多个标签绑定事件时会引起另一个事件的相应，但是我们不想让别的事件来响应，所以这个时候就需要组织冒泡了。

我们就用一个简单的案例来说明：

（1）这是div嵌套div在嵌套一个a标签

<div id="div1" class="div1">最外层
    <div id="div2" class="div2">中间层层
        <a id="a1" href="***">最里层</a>
    </div>
</div>

（2）js内容，给每div个a标签设置点击事件

<script>
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    var a1 = document.getElementById("a1");
    div1.addEventListener("click", function (event) {
        alert("最外层");
    });
    div2.addEventListener("click", function (event) {
        alert("中间层");

    });
    a1.addEventListener("click", function (event) {
        alert("最里层");
        event.stopPropagation();
    });
</script>

运行的结果证明，当我们不设置阻止冒泡的时候，点击最里层，alert弹出的顺序是 最里层→中间层→最外层，然后会跳转到

a标签的链接地址。那么这里我们就开始设置阻止冒泡

（1）event.stopPropagation()

a1.addEventListener("click", function (event) {
        alert("最里层");
        event.stopPropagation();
    });

给a标签设置 event.stopPropagation()，点击结果是，弹出 最里层并且跳转地址，中间层和最外层则不会弹出。

（2）event.preventDefault()

	
a1.addEventListener("click", function (event) {
        alert("最里层");
        event.preventDefault();
    });
	给a标签设置event.preventDefault()，点击结果是，弹出  最里层→中间层→最外层，但不会跳转页面。

	那么说，stopPropagation阻止了冒泡事件，但是没有阻止默认事件，也就是说可以跳转，

	preventDefault，没有阻止事件的冒泡，但是阻止了默认的事件，就是不可以跳转页面。