js阻止默认事件（a标签跳转），阻止事件冒泡

最近刚学习完js基础，今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记，于是写这篇文章算是做一个总结，也是加深一下印象。

1.阻止默认事件

在html中有很多自带默认事件的元素，很典型的例子：a标签，如果给a标签绑定点击事件，触发后页面会有一个刷新，是a链接默认的跳转事件，阻止这个有很多方法

给a标签中href属性添加

<a href="javascript:;">链接</a>

<a href="javascript:void(0);">链接</a>

给绑定的事件添加return false

<a href="" id="link">链接</a>

<script>
        document.getElementById("link").onclick = function (){
            console.log("666");
            return false;
        }
</script>

使用event事件里的方法

<a href="" id="link">链接</a>

<script>
    document.getElementById("link").onclick = function (e){
        console.log("666");
        e.preventDefault();
    }
</script>

这个preventDefault()是event阻止默认事件的方法，这里只是用a标签举个例子

2.阻止事件冒泡

结构

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

样式

<style>
        #box1{
            width: 250px;
            height: 250px;
            background-color: pink;
        }
        #box2{
            width: 150px;
            height: 150px;
            background-color: lightcoral;
        }
        #box3{
            width: 70px;
            height: 70px;
            background-color: lightgreen;
        }
    </style>

js

my$("box3").onclick = function (event) {
        console.log("里面的盒子");
}
my$("box2").onclick = function () {
        console.log("中间的盒子")
}
my$("box1").onclick = function () {
        console.log("外边的盒子")
}

此时点击最里边的小盒子，控制台输出的是这样的

里面的盒子
中间的盒子
外边的盒子

这就是事件的冒泡，从内向外
event鼠标事件对象中stopPropagation()方法来阻止冒泡
在要阻止的对象事件中加入

my$("box3").onclick = function (event) {
        console.log("里面的盒子");
        //阻止事件冒泡   event鼠标的事件对象
        event.stopPropagation(); 
}

此时的控制台输出为

里面的盒子

阻止事件冒泡成功

这就是我的一点小总结，算是一个印象加深的过程吧！