一直听说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. UIActinSheet和UIActionSheetDelegate

    UIActinSheet和UIActionSheetDelegate 这个是就那个UIActionSheet对象  一般用来选择类型或者改变界面...还有更多应用 定义如下:UIActionSheet ...

  2. 【Mysql进阶技巧(1)】 MySQL的多表关联与自连接

    自连接 测试数据准备 CREATE TABLE `t2` ( `id` int(11) NOT NULL, `gid` char(1) DEFAULT NULL, `col1` int(11) DEF ...

  3. C语言itoa()函数和atoi()函数详解(整数转字符)

    http://c.biancheng.net/cpp/html/792.html C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. 以下是用itoa()函数将整 ...

  4. Qt之高级网络操作（HTTP/FTP快速上手）Qt之QHttpPart和QHttpMultiPart

    http://blog.csdn.net/u011012932/article/details/52535755 http://blog.csdn.net/u011012932/article/det ...

  5. php Laravel windows安装

    先要装一个composer, 如果不会装请看这里composer windows可以直接下载composer-setup.exe, 如果安装失败提示"Unable to connect to ...

  6. knowledge about apache

    http://wenku.baidu.com/link?url=6O51BQJdtFRFWDGszKfN3aK7IY92QTCpuc7miBhRLazXvxL5gXb18B_TqIdi3EruX1o_ ...

  7. 微信支付开发1 微信支付URL配置

    本文介绍微信支付申请时如何设置授权目录及URL. 一.选择支付类型 目前有两种支付类型 JS API网页支付 Native原生支付 如果没有特殊要求,两种都勾选. 二.支付授权目录 目前可以选择htt ...

  8. 中文编码之GB2312，Big5，GBK简介

    汉字编码中现在主要用到的有三类,包括GBK,GB2312和Big5. 1.GB2312 又称国标码,由国家标准总局发布,1981年5月1日实施,通行于大陆.新加坡等地也使用此编码.它是一个简化字的编码 ...

  9. webapp开发经验和资料

    开发经验: 开发资料: 1. http://xuui.net/librarys/webapps/webapp-development-of-commonly-used-code-snippets.ht ...

  10. jwplayer 网页在线播放插件

    1.到官网 https://www.jwplayer.com/ 注册,取得key并下载免费版本(免费版只支持mp4格式): 2.编辑如下网页即可在线播放: <!DOCTYPE html> ...