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

曾经终败给现在 2022-01-26 01:15 509阅读 0赞

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

## 1.阻止默认事件 ##

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

###### 给a标签中href属性添加 ######

###### 给绑定的事件添加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.阻止事件冒泡 ##

结构

样式

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(); 
    }

此时的控制台输出为

里面的盒子

阻止事件冒泡成功

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