zoukankan      html  css  js  c++  java
  • jquery事件函数和原生事件绑定函数中return false的区别

    一直听说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='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='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='200px;height:200px;background:red;display:block;' href='http://www.baidu.com'>aaaa</a>
            </body>
    </html>
    运行之后发现打印div和body,并且会跳转到百度,所以2级dom事件函数中的return false什么事情也没做,和jquery不同

  • 相关阅读:
    mybatis动态拼接条件的技巧 where 1=1 或者where标签
    cron表达式
    java获取电脑mac物理地址
    js 正则表达式:价格的校验
    java 当前时间月份
    中文保存在properties乱码的解决
    java 手机号码+邮箱的验证
    27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽
    26.python操作Excel
    25.xlrd、xlwt和openpyxl模块的比较和使用
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/4112221.html
Copyright © 2011-2022 走看看