preventDefault与stopPropagation的作用

最新推荐文章于 2024-08-29 10:00:00 发布

magic__man

最新推荐文章于 2024-08-29 10:00:00 发布

阅读量1.1w

点赞数 9

本文链接：https://blog.csdn.net/magic__man/article/details/51782523

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如题，本篇文章讨论preventDefault和stopPropagation二者的作用，首先，先理解一下二者的字面意思：

一、preventDefault，prevent是动词，意为“防止，阻止”；Default是名词，有“系统默认值”的意思，preventDefault在js中的意思就是“阻止系统默认（行为）”。

二、stopPropagation，stop是动词，意为“中止”；Propagation是名词，意为“传播”，stopPropagation在意为“中止传播”，在js中的意思

是“阻止js事件冒泡”。

下面来看二者具体作用：

关于e.preventDefault，这里有一段html：

<a href="https://www.baidu.com/" id="goBaidu">你点我试试</a>

如果是在正常状态下，当点击该元素，窗口会跳转到百度的首页，然而，我给它加上一段js:

var goBaidu = document.getElementById('goBaidu');
goBaidu.onclick = function(e){
    stopJump(e)
};
function stopJump(e){
    e.preventDefault();
}

这个时候，再点击该元素，它不会有任何反应，或者说，它反应之后的状态跟点击之前一样比较恰当，发生改变的根本，就是js中的

e.preventDefault()，因为当a标签的href属性存在并有一个正确的地址时，点击它，它会跳转到对应的地址去，这就是它的默认行为，而e.preventDefault()的作用正是阻止这种行为。

关于e.stopPropagation，这里同样有一段html：

<span style="font-size:14px;"><span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
       .box{
           width: 200px;
           height: 200px;
           display: inline-block;
           background-color: #6495ed;
           margin-right: 50px;
           cursor: pointer;
       }
       .box>.boxSon{
           display: inline-block;
           width: 100px;
           height: 100px;
           margin: 50px;
           background-color: black;
       }
       .box>.boxSon>p{
           font-size: 18px;
           color: #ffffff;
           text-align: center;
           cursor: pointer;
       }
    </style>
</head>
<body>

<div class="box" id="parent01" οnclick="alert(this.id)">
    <div class="boxSon">
        <p οnclick="alert('这是p元素')">点我</p>
    </div>
</div>

<div class="box" id="parent02" οnclick="alert(this.id)">
    <div class="boxSon" οnclick="stopUp(event)">
        <p οnclick="alert('这是p元素')">你再点我</p>
    </div>
</div>

</body>
<script type="text/javascript">
    function stopUp(e){
        e.stopPropagation();
    }
</script>
</html></span></span>

上面的html代码中，有两个class名为box的蓝色div，它们包含的元素也是一模一样其子元素绑定的事件也是一模一样，唯一不同的是，第一个box里面，它的子元素boxSon没有绑定事件，而第二个box里面的子元素boxSon绑定了事件，它的事件只有一行代码，就是e.stopPropagation();现在来操作一下两个box内的事件：

点击第一个box里面的p元素，先后弹出两次提示框：