做小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. Unity进阶:行为树 02 夺旗战搭建场景，AI脚本，旗子拿起

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  2. ArcMap和ArcGIS Pro加载百度地图

    前面发布了两篇我用ArcBruTile开发用于ArcMap加载百度地图的插件ArcBruTileBaidu,放在网上后评论和反响还不错,还有两位大学同学通过百度搜索居然搜到我本人!文章和技术介绍也被网 ...

  3. CentOS -- Redis 3.2.12 Standalone Install and Configuration

    1 Tune OS setting  echo never > /sys/kernel/mm/transparent_hugepage/enabled echo "vm.overcom ...

  4. HDU 6299

    题意略. 思路: 我们先把所有字符串处理成 ")))((((" 这样的形式.然后我们把这些字符串排个序,按照min(l,r)来排,小的在前,在我的代码中,l为 ( 的个数,r 为 ...

  5. Java基础之String、StringBuffer、StringBuilder浅析

    Java基础之String.StringBuffer.StringBuilder浅析 一.前言: 位于java.lang包下的String.StringBuilder.StringBuffer一般都是 ...

  6. 再谈C#装箱和拆箱操作

    1. 使用非泛型集合时引发的装箱和拆箱操作 看下面的一段代码: 1 2 3 4 5 6 7 8 var array = new ArrayList(); array.Add(1); array.Add ...

  7. Installing the JMeter CA certificate for HTTPS recording

    参考: http://jmeter.apache.org/usermanual/component_reference.html#HTTP(S)_Test_Script_Recorder User m ...

  8. 牛客19985 HAOI2011向量（裴属定理,gcd）

    https://ac.nowcoder.com/acm/problem/19985 看到标签“裴属定理”就来做下,很眼熟,好像小学奥数学过.. 题意:给你a,b,x,y,你可以任意使用(a,b), ( ...

  9. HDU2276 Kiki & Little Kiki 2 矩阵快速幂

    Kiki & Little Kiki 2 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  10. flex布局 一侧固定宽度 一侧自适应

    想实现一个类似知乎个人主页的资料显示布局 类是下面这样 其中显示图片在一个div,Name和class和button在一个div中,使用justify-content: space-between; ...