• 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不同

  • 相关阅读:
    css世界六
    电子书
    es 浏览器支持情况地址
    mac 下载文件的一些地址
    NODE_ENV production / development
    css世界五
    css世界四
    css世界三
    css世界二
    关于递归算法
  • 原文地址:https://www.cnblogs.com/jiangtuzi/p/4112221.html
Copyright © 2020-2023  润新知