return false，preventDefault，stopPropagation的用法对比

最新推荐文章于 2022-11-13 21:23:58 发布

原创最新推荐文章于 2022-11-13 21:23:58 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#冒泡 #默认事件 #return

js 专栏收录该内容

13 篇文章

订阅专栏

先看一段简单的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #gpa {
        margin: 0 auto;
        width: 100px;
        height: 60px;
        background: green;
    }

    #pa {
        width: 60px;
        height: 40px;
        background: pink;
        margin: 0 auto;
        text-align: center
    }
</style>
<body>
<div id="gpa">
    <div id="pa">
        <a href="http://www.baidu.com" id="chi">百度</a>
    </div>
</div>
</body>
<script>
    var gpa = document.querySelector("#gpa");
    var pa = document.querySelector("#pa");
    var chi = document.querySelector("#chi");

    chi.onclick = function () {
        alert("chi")；
    }
    gpa.onclick = function () {
        alert("gpa")
    }
    pa.onclick = function () {
        alert("pa");
    }
</script>
</html>

【return false】的用法

今天在网上搜了一下各自的用法，发现关于【return false】的用法的说法有多种，看的晕晕的。经过自己的尝试，发现其中的一种还是比较贴切的。
【return false】用来阻止默认事件的发生，阻止下一句代码的运行，而不是用来阻止事件向上一层传播的。
点击 a标签（百度），会发现浏览器会这样的执行：
1、alert(“chi”)；
2、 alert(“gpa”)；
3、 alert(“pa”);
4、跳转到百度首页。
如将

 chi.onclick = function () {
        alert("chi")；
    }

改为：

 chi.onclick = function () {
        alert("chi");
       return false;
    }

则会发现，浏览器会执行：
1、alert(“chi”)；
2、 alert(“gpa”)；
3、 alert(“pa”);
没有执行第四步，说明【 return false】，会阻止默认事件的执行，但没有阻止冒泡事件。（有人说，【return false】既可以阻止默认事件，又可以阻止冒泡事件。这个我还没有发现，可能是使用的方法不一样吧。既然它的功能不能太肯定，为什么不用一定正确的方法呢？）

preventDefault阻止默认事件的方法

将代码

 chi.onclick = function () {
        alert("chi")；
    }

改为

    chi.onclick = function () {

        alert("chi");
        event.preventDefault();

    }

点击a（百度）标签，浏览器会执行：
1、alert(“chi”)；
2、 alert(“gpa”)；
3、 alert(“pa”);
没有跳转，说明preventDefault会阻止默认事件的执行。

stopPropagation阻止冒泡事件

将代码

 chi.onclick = function () {
        alert("chi")；
    }

改为

    chi.onclick = function () {
        alert("chi");
        event.stopPropagation();
    }

浏览器会执行：
1、alert(“chi”)；
2、跳转至百度首页。
说明stopPropagation是可以阻止冒泡事件的发生的。
关于preventDefault和stopPropagation的用法是统一的。
还是各司其职的用它们比较好。