一直听说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. QTreeView只显示指定驱动器及其目录，隐藏所有兄弟节点

    MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setup ...

  2. RedMine项目管理系统安装问题(Linux版一键安装包)

    安装环境 操作环境:VMware下安装的Parrot Security OS 系统 使用软件:bitnami-redmine---linux-x64-installer.run 问题描述: 安装步骤与 ...

  3. 【php】对PHPExcel一些简单的理解

    这里有关于excel文件的几个概念需要跟大家说明一下,这几个概念对于我们的后续编程是很有帮助的:1.工作簿:在excel环境中用来存储数据并处理数据的文件,又称为excel文件或excel文档,   ...

  4. 流行的MySql版本

    简介 MySQL是历史上最受欢迎的免费开源程序之一.它是成千上万个网站的数据库骨干,并且可以将它(和Linux)作为过去10年里Internet呈指数级增长的一个有力证明. 那么,如果MySQL真的这 ...

  5. 【转载】LVS+MYCAT+读写分离+MYSQL主备同步部署手册（邢锋）

    LVS+MYCAT+读写分离+MYSQL主备同步部署手册 1          配置MYSQL主备同步…. 2 1.1       测试环境… 2 1.2       配置主数据库… 2 1.2.1  ...

  6. 浅谈JavaBean,Entity Bean,Enterprise Bean等Bean以及POJO的含义

      一.对于java bean,就是一个java模型组件,他为使用java类提供了一种标准的格式,在用户程序和可视化管理工具中可以自动获得这种具有标准格式的类的信息,并能够创建和管理这些类.  jav ...

  7. Java [leetcode 37]Sudoku Solver

    题目描述: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated ...

  8. 进程间通信七 (socket)

    copyright:weishusheng          data:2015.5.26              摘要:socket又叫套接字或者插口,它也是进程间通信的一种方式,实际上就是网络上 ...

  9. JS保留两位小数 [转]

    js保留2位小数toFixed(xxxx) var a = 9.39393; alert(a.toFixed()); alert(Number.toFixed(9.39393)); 返回的是9. 对于 ...

  10. tomcat+dbcp+jndi 配置

    1)添加jar包 tomcat6中 TOMCAT_HOME/lib 下是公用jar包 dbcp需要3个jar包:Jakarta-Commons DBCP,Jakarta-Commons Collect ...