return false，preventDefault，stopPropagation的用法对比

来源：互联网发布：初学者学化妆知乎编辑：程序博客网时间：2024/06/14 10:45

先看一段简单的代码。

<!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的用法是统一的。
还是各司其职的用它们比较好。

阅读全文

0 0