做小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. 企查查app 初步探索

    企查查app sign算法破解初步探索 之前有说过企查查的sign的解密,但这次是企查查app的sign算法破解,目前是初步进程. 已删除!!!! 上边一些变量已经找到了,其中就有时间戳,其余两个需要 ...

  2. .NET Core 小程序开发零基础系列（2）——小程序服务通知（模板消息）

    基于上一篇文件“.NET Core 小程序开发零基础系列(1)——开发者启用并校验牵手成功”的反映,个人觉得效果很不错,大家对公众号开发还是有很大需求的,同时也收到了很多同学的问题,后面我也会通过实战 ...

  3. c++采集windows操作系统名称

    WINAPI windows通过c++获取操作系统主要分两种: 1. windows是8.1版本以下版本:获取操作系统可以通过windows提供的api中GetVersionEx函数来获取 2. wi ...

  4. 从无到有构建vue实战项目（七）

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

  5. Delphi - Indy 创建邮件自动发送服务

    服务器自动邮件线程 功能:此程序主要实现对Oracle数据库表tableName(存放需要发送邮件的相关信息)里面相关信息的邮件发送. 优点:开发人员可以直接再数据库后台对tableName表进行插入 ...

  6. Java8 日期 API 业务使用

    最近在做账单结算业务,需要根据客户选择的结算方式来推算下一次结算日期以及该次结算日期段. 推算日期这样的业务直男君以前就写过,只不过使用的是熟悉的 java.util.date 和 java.util ...

  7. JMeter简介及使用JMeter来访问网站

    参考: http://jmeter.apache.org/ http://blog.chinaunix.net/uid-26884465-id-3416869.html http://www.ltes ...

  8. codeforce#483div2C-Finite or not?数论，GCD

    传送门:http://codeforces.com/contest/984/problem/C 这道题 题意:求q/p是否能用k进制有限表示小数点后的数:   思路:数学推理:     1.首先把q/ ...

  9. 51 nod 石子归并 + v2 + v3（区间dp，区间dp+平行四边形优化，GarsiaWachs算法）

    题意:就是求石子归并. 题解:当范围在100左右是可以之间简单的区间dp,如果范围在1000左右就要考虑用平行四边形优化. 就是多加一个p[i][j]表示在i到j内的取最优解的位置k,注意能使用平行四 ...

  10. 2019最新WEB全栈架构师第八期视频教程

    下载链接:https://www.yinxiangit.com/117.html