一直听说jquery中事件函数返回false，相当于调用了event.preventDefault()和event.stopPropagation()两个方法，
今天就想看看dom中0级、1级、2级事件绑定事件的话，事件函数返回false会是个什么情况，看看是不是和jquery一个样；
<!doctype html>
<html>
        <head>
                <meta charset='utf-8' />
                <script>
                        function a(){
                                console.log("body");
                        }
                        
                        function b(event){
                                console.log("div");
                                return false;
                        }
                </script>
        </head>
        <body onclick='a();'>
                <a style='width:200px;height:200px;background:red;display:block;' href='http://www.baidu.com' onclick='return b();'>aaaa</a>
        </body>
</html>
运行之后发现打印div和body,但是不会跳转到百度，所以0级dom事件的return false只是阻止了默认事件，和jquery 的不同

再来看看1级dom事件
<!doctype html>
<html>
        <head>
                <meta charset='utf-8' />
                <script>
                        function a(){
                                console.log("body");
                        }
                        
                        function b(event){
                                console.log("div");
                                return false;
                        }
                        function load(){
                                document.body.onclick = a;
                                document.getElementsByTagName("a")[0].onclick = b;
                        }
                </script>
        </head>
        <body onload='load();'>
                <a style='width:200px;height:200px;background:red;display:block;' href='http://www.baidu.com'>aaaa</a>
        </body>
</html>
运行之后发现打印div和body,但是不会跳转到百度，所以1级dom事件的0级dom事件函数中的return false含义一样，只是阻止了默认事件，和jquery 的不同

再来看看2级dom事件
<!doctype html>
<html>
        <head>
                <meta charset='utf-8' />
                <script>
                        function a(){
                                console.log("body");
                        }
                        
                        function b(event){
                                console.log("div");
                                return false;
                        }
                        function load(){
                                document.body.addEventListener("click",a,false);
                                document.getElementsByTagName("a")[0].addEventListener("click",b,false);
                        }
                </script>
        </head>
        <body onload='load();'>
                <a style='width:200px;height:200px;background:red;display:block;' href='http://www.baidu.com'>aaaa</a>
        </body>
</html>
运行之后发现打印div和body,并且会跳转到百度，所以2级dom事件函数中的return false什么事情也没做，和jquery不同

jquery事件函数和原生事件绑定函数中return false的区别的更多相关文章

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

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

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

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

  3. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  4. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  5. js中return false; jquery中需要这样写：return false(); Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  6. javaScirpt事件详解-原生事件基础（一）

    事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能响应相关的操作.图片引用:UI Events 事件流 ...

  7. jQuery js 中return false,e.preventDefault(),e.stopPropagation()的区别(事件冒泡)

    有时候遇到冒泡事件很烦人,真的..... 1.e.stopPropagation()阻止事件冒泡 <head> <title></title> <script ...

  8. javascript事件中'return false'详解

    浏览器中有很多异步事件,如click,mouseenter,mouseover等等,当用户执行相应操作之后,触发这个事件,然后执行相应的事件处理函数,一般情况下,我们可以通过三种方式给元素添加事件处理 ...

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

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

随机推荐

  1. 李洪强iOS开发之使用CycleScrollView实现轮播图

    01 导入头文件,并且定义CycleScrollView属性 02 初始化,设置frame并且添加到collectionView上 03 调用方法并且设置轮播的图片

  2. CURL与PHP-CLI的应用【CURL篇】

    curl是一个极为强大的HTTP传输工具,支持文件的上传和下载; curl在命令行下的使用 命令参数 -a/--append 上传文件时,附加到目标文件 -A/--user-agent <str ...

  3. 组策略限制添加用户作为服务登录导致ITAtomcat服务无法启动（log on as a service）

    [故障类型]:ITA tomcat服务器无法启动. [关 键 词]:Logon as a service  作为服务登录  tomcat  loggeter [适用版本]:FusionCloud So ...

  4. python函数--传参

    一.位置参数 二.关键字参数 三.默认参数 四.任意数量的位置参数: 1. *x 2. 传入的多个参数,最终合并成一个元组 3. 之后的参数必须用关键字参数 五.任意数量的关键字参数 1. **x 2 ...

  5. android 引用 project以及下拉刷新开源类库Android-PullToRefresh 的使用

    Android-PullToRefresh 是一个github上的开源下拉刷新类库, GitHub  .此外,该作者还有另外一个实用度和关注量极高的项目–另一种Android ActionBar的实现 ...

  6. Android开发之布局的学习

    FrameLayout-帧布局 实现效果: 代码: <?xml version="1.0" encoding="utf-8"?> <Frame ...

  7. Hadoop课程介绍

    一.课程简介 1. Hadoop是什么? Apache Hadoop是一款支持数据密集型分布式应用并以Apache 2.0许可协议发布的开源软件框架.它支持在商品硬件构建的大型集群上运行的应用程序.H ...

  8. 结构体 typedef struct hash_cell_struct hash_cell_t;

    typedef struct hash_cell_struct hash_cell_t; struct hash_cell_struct{ void* node; /*!< hash chain ...

  9. 结构体 lock_sys

    typedef struct lock_sys_struct lock_sys_t; extern lock_sys_t* lock_sys; struct lock_sys_struct{ hash ...

  10. php 对象调用方法

    static union _zend_function *zend_std_get_method(zval **object_ptr, char *method_name, int method_le ...