一直听说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开发之使用 Reachability 检测网络

    1.iOS平台是按照一直有网络连接的思路来设计的,开发者利用这一特点创造了很多优秀的第三方应用. 大多数的iOS应用都需要联网,甚至有些应用严重依赖网络,没有网络就无法正常工作. 2.在你的应用尝试通 ...

  2. [Unity菜鸟] Unity鼠标双击，鼠标函数整理(未完)

    1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

  3. ArcGIS Runtime for Android开发教程V2.0（4）基础篇---MapView

    原文地址: ArcGIS Runtime for Android开发教程V2.0(4)基础篇---MapView - ArcGIS_Mobile的专栏 - 博客频道 - CSDN.NET http:/ ...

  4. Android EditText中插入图片并响应点击事件

    EditText中插入图片基本就是两种方法: ,通过Html.fromHtml(..)来实现 [mw_shl_code=java,true]eText.append(Html.fromHtml(&qu ...

  5. 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 ...

  6. fedora SSH

    设置无密码登陆时注意:chmod 0700 .ssh chmod 600 ~/.ssh/authorized_keys  cat /root/.ssh/id_rsa.pub  >> /ro ...

  7. PHP实现浏览历史记录

    http://www.3a88.com/service/206.html http://www.1360.cc/ZhanChangJiaoCheng/6831.html http://www.osch ...

  8. Xcode中的iOS工程模板

    1. Application类型 我们大部分的开发工作都是从使用Application类型模板创建iOS程序开始的.该类型共包含7个模板,具体如下所示. Master-Detail Applicati ...

  9. ＊gravity的取值详表

    android有 android:layout_gravity 和 android:gravity,前者设置相对父控件布局,后者是设置自己内部的控件的布局. Value Description top ...

  10. Oracle命令（一）：Oracle登录命令

    1.运行SQLPLUS工具 C:\Users\wd-pc>sqlplus 2.直接进入SQLPLUS命令提示符 C:\Users\wd-pc>sqlplus /nolog 3.以OS身份连 ...