您好,欢迎访问成都祈钰瑶科技有限公司!

全国咨询热线

18982081108
✕

成都网站建设公司,成都网站UI设计,成都网站安全维护,成都网站内容优化服务

jquery事件函数和原生事件绑定函数中returnfalse的区别-创新互联

一直听说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事件函数和原生事件绑
定函数中returnfalse的区别