做小demo时经常用到return false来取消默认事件，但一直不是很懂它和preventDefault()等的区别，今天查了查文档和大神们的博客，在这里对相关知识点做一个总结

首先开门见山，总结一下这三者的区别：

event.stopPropagation():阻止事件冒泡，对默认事件无影响

event.preventDefault():阻止默认事件，和事件冒泡无关

return false：原生js中，阻止默认事件，jQuery中既会阻止默认事件又会阻止事件冒泡

这样理解起来可能不是很清晰，我们都知道，a标签的默认事件之一为点击链接跳转，让我们做一个与此相关的小demo加深一下印象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div{width: 100px;height: 100px;border: 1px solid #ccc;}

        div a{display: block;width: 30px;height: 100px;background: skyblue;}

    </style>

</head>

<body>

    <div id="box1">

        <a href="http://www.baidu.com"></a>

    </div>

     <div id="box2">

        <a href="http://www.baidu.com"></a>

    </div>

    <div id="box3">

        <a href="http://www.baidu.com"></a>

    </div>

    <div id="box4">

         <a href="http://www.baidu.com"></a>

    </div>

    <div id="box5">

        <a href="#"></a>

    </div>

    <script>

        /*event.stopPropagation()&&event.preventDefault()&&return false*/

        box1.onclick=function(){

            console.log("parent");

        }//不阻止默认事件和冒泡，打印并且跳转



        /*event.stopPropagtion()，阻止事件冒泡，但不影响默认事件*/

        box2.onclick=function(){

            console.log("parent");

        }

        box2.children[0].onclick=function(event){

            event.stopPropagation();//仅跳转，冒泡被阻止

        }

        /*event.preventDefault(),阻止默认事件，但冒泡不被阻止*/

        box3.onclick=function(){

            console.log("parent");

        }

        box3.children[0].onclick=function(event){

            event.preventDefault();//打印parent，不跳转

        }

        /*return false; 在原生中，该方法仅会阻止默认事件，相当于调用了event.preventDefault()，但在jQuery中，它

        会同时阻止事件冒泡和默认事件*/

        box4.onclick=function(){

            console.log("parent");

        }

        box4.children[0].onclick=function(){

            return false;

        }</script>

</body>

</html>

event.stopPropagation()、event.preventDefault()与return false的区别的更多相关文章

  1. event.stopPropagation()，event.preventDefault()和return false的区别

    event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...

  2. 【转】stopPropagation, preventDefault 和 return false 的区别

    因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是  stopPropagat ...

  3. stopPropagation, preventDefault 和 return false 的区别

    因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...

  4. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  5. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  6. event.stopPropagation()和event.preventDefault()，return false的区别

    我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...

  7. 【前端】stopPropagation, preventDefault, return false的区别

    e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...

  8. event.preventDefault() vs. return false

    使用jquery方式的话,以下是等效的 return false === event.stopPropagation + event.preventDefault() //1. event.preve ...

  9. js的stopPropagation()、cancelBubble、preventDefault()、return false的分析

    个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...

随机推荐

  1. SecureCRT软件的个性化设置

    工欲善其事,必先利其器.如果我们能花点时间把每天工作都要用到的SecureCRT软件设置的舒服一些,日后工作起来也是会心情愉悦.事半功倍的. 1.日志文件设置 2.窗口配色和关键字高亮 3.效果展示 ...

  2. GIt到本地小技巧

    运行CMD自动到C盘,假如我要把项目clone D盘 ,就要去cd : D:\.. 乱七八糟的重复工作.烦死了. 下面是更加方便的技巧 直接在要GIt clone的路径打上CMD,然后回车.方便多了, ...

  3. Spring学习之旅(三)--装配Bean

    装配 Bean 的方式 在 XML 中进行显式配置 在 Java 中进行显式配置 隐式的 Bean 发现机制和自动装配 Spring 提供了以上三种方式进行 Bean 的配置,可以根据自己的需求选择一 ...

  4. Codeforces 1009D

    题意略. 思路: 可知对于一个拥有n个点的图来说,它至少需要有n - 1条边来维持连通性,而且数字1恰好与后面的n - 1个数字互质: 至于n个点的图可以产生合法的互质边的个数的上限,我们可以通过莫比 ...

  5. Leetcode之回溯法专题-52. N皇后 II（N-Queens II）

    Leetcode之回溯法专题-52. N皇后 II(N-Queens II) 与51题的代码80%一样,只不过52要求解的数量,51求具体解,点击进入51 class Solution { int a ...

  6. 12_goto语句的使用

    1.goto是一个关键字,其作用是运行到goto语句进行跳转,立即执行goto后面所对应标签的语句2.结构:goto 标签名(任意起)3.goto语句尽量不要跨函数使用,否则会使代码看起来非常乱,可读 ...

  7. switch语句（上）(转载)

    switch语句是C#中常用的跳转语句,可以根据一个参数的不同取值执行不同的代码.switch语句可以具备多个分支,也就是说,根据参数的N种取值,可以跳转到N个代码段去运行.这不同于if语句,一条单独 ...

  8. 在.net core web 项目中操作MySql数据库（非ORM框架，原生sql语句方式）

    本案例通过MySql.Data和Dapper包执行原生sql,实现对数据库的操作. 操作步骤: 第1步:在MySql数据库中新建表User(使用Navicat For MySql工具) 建表语句: c ...

  9. python-re正则表达--持续更新

    | 模式          | 描述| |----              |----| | \w            | 匹配字母数字及下划线 | | \W           | 匹配非字母数 ...

  10. Java IO/输入与输出

    File类 File类是IO包中唯一代表磁盘文件本身信息的类,而不是文件中的内容 File类定义了一些与平台无关的方法来操纵文件,例如,创建,删除文件和重命名文件 Java中的目录被当作一种特殊文件, ...