event中的stopPropagation和preventDefault

最新推荐文章于 2024-05-28 17:29:02 发布

mm19931027

最新推荐文章于 2024-05-28 17:29:02 发布

阅读量1.2k

点赞数 3

分类专栏： JS 文章标签： javascript dom

本文链接：https://blog.csdn.net/mm19931027/article/details/76121855

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

很多初学js的或者是很少用到阻止冒泡的或者是工作了蛮久还是对js并不是那么了解的童鞋，可能对stopPropagation和preventDefault的作用并不是那么清晰，在很多小伙伴都问了之后，决定还是把这两个小东西梳理出来。在梳理之前，我觉得我们有必要理解一下什么是冒泡。
来，先理论知识走起来！

一、DOM事件模型

一共有3个阶段：
1、捕获：从window开始，由外向内，依次记录各级元素绑定的事件处理函数。
强调：捕获阶段只到目标元素截止

2、目标触发：默认实际触发事件的元素上的处理函数先执行。
目标元素：实际触发事件的元素

3、冒泡：按照捕获阶段反向的顺序，从目标元素的上一级开始，依次执行各级父元素上的事件处理函数

注意：IE8的事件模型只有2个阶段：目标触发和冒泡。

二、什么是事件的默认行为

在我的理解内（若有理解不对的地方，欢迎交流，共同进步！），事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为，例如点击 a 标签会跳转，点击 type=”text” 的 input 可以输入等等，这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件，但依然可以实现点击跳转等这些行为，而这些就是事件的默认行为。

三、stopPropagation

取消冒泡：执行完当前元素的事件处理函数后，阻止冒泡向上执行

四、preventDefault

取消默认行为：阻止后续默认行为，在函数内放前放后，对当前函数无影响

对基本的理论有大致概念之后，那么我们现在通过一个栗子来了解它们带来的效果。

五、栗子分析

css部分：

<style>
    a{
        display: inline-block;
        width: 200px;
        height: 100px;
        background-color: #953b39;
    } 
    span{
        display: inline-block;
        background-color: #abbbbb;
        margin: 35px 70px;
        width: 60px;
        height: 30px;
        font-size: 20px;
    }
</style>

html部分：

<body>
    <a href="http://blog.csdn.net"><span>看这里</span></a>
</body>

这是未加js的时候，效果图为：
这里写图片描述

现在给这个a元素和span元素分别添加点击事件：

var a = document.getElementsByTagName("a")[0];
var span = document.getElementsByTagName("span")[0];
a.onclick = function (e) {
    alert("click a");
};
span.onclick = function (e) {
    alert("click span");
}

此时点击span效果依次为：
“click span”->“click a”->跳转页面到http://blog.csdn.net

1、如果我们想要点击span，不触发a的点击事件，也就是想要的最终效果依次为：

“click span”->跳转页面到http://blog.csdn.net

那么，我们可以在span的点击事件中加上e.stopPropagation()，阻止点击事件冒泡到a上，代码如下：

span.onclick = function (e) {
    e.stopPropagation();
    alert("click span");
}

通俗点说，如果想要点击span不触发它父元素（所有父元素）上面的点击事件，可以加上e.stopPropagation()。

2、如果我们想要点击span，不让页面跳转，也就是想要的最终效果依次为：

“click span”->“click a”

那么，我们可以在span的点击事件中加上preventDefault，代码为：

span.onclick = function (e) {
    e.preventDefault();
    alert("click span");
}

也就是阻止了事件的默认行为。

3、如果想要点击span，只触发span的点击事件，也就是想要的最终效果为：

“click span”

那么，就可以把stopPropagation和preventDefault都加上，代码为：

span.onclick = function (e) {
    e.stopPropagation();
    e.preventDefault();
    alert("click span");
}

（分享完毕）

最后
我的心愿是
希望程序员不再头顶秃地，而是头顶茂密！

mm19931027

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
event中的stopPropagation和preventDefault

1、DOM事件模型；2、事件默认行为；3、stopPropagation；4、preventDefault；5、栗子分析
复制链接

扫一扫

专栏目录