14-jquery 事件冒泡 弹窗示例

事件冒泡

在一个对象上触发某类事件(比如单机onclick事件)，如果此对象定义了此事件的处理程序，就会先执行处理程序，然后向父级传播（执行父级的onclick事件）,如果父级没有此事件的处理程序就再向上传播(如果有 处理程序就先执行再向上传播)。

 

事件冒泡的作用：

就是为了帮我们做事件委托
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            /*
            $('.son').bind('click',function(){
                alert("1")
            })
            */

            $(".son").click(function(){
                alert("1")
            })

            $('.father').click(function(){
                alert('2')
            })

            $('.grandfather').click(function(){
                alert('3')
            })


        })
      
    </script>
    <style>
        .grandfather{
            width:300px;
            height:300px;
            background-color:green;
            position:relative;
        }

        .father{
            width:200px;
            height:200px;
            background-color:gold;
        }

        .son{
            width:100px;
            height:100px;
            background-color:red;
            position: absolute;
            left:0;
            top:400px;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">
            </div>
        </div>
    </div>
</body>
</html>

 

阻止事件冒泡：

事件冒泡机制有时是不需要的，需要阻止掉，通过event.stopPropagation()来阻止。
注：事件发生的时候，都有一个event对象，用的时候就用它，不用就无须理会它

阻止事件冒泡：
event.stopPropagation()

阻止默认行为：
阻止表单提交：
$("#form1").submit(function(event){
event.preventDefault();
})

合并阻止操作：
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写：
//event.stopPropagation()
//event.preventDefault();

//合并写法： [而且也不需要event对象了]
return false;

 

   $(".son").click(function(){
                alert("1")
                return false
            })

 

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            /*
            $('.son').bind('click',function(){
                alert("1")
            })
            */

            $(".son").click(function(event){
                alert("1")
                //event是发生事件时的事件对象，使用的时候通过第一个参数传递，可以写任意值(就相当于一个变量)
                //这个事件就在这里阻止了，不会再向父级传递
                event.stopPropagation() //可以写成：return false
　　　　　　　　　
            })

            $('.father').click(function(){
                alert('2')
            })

            $('.grandfather').click(function(){
                alert('3')
            })


        })
      
    </script>

 

弹窗示例：

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                /* 可以用行间样式显示出来 
                $(".pop_con").css({display:'block'})
                
                //也可以用show()
                $(".pop_con").show() */
                
                //还可以用fadeIn()
                $(".pop_con").fadeIn()
                return false
            })

            /*点击mask隐藏弹框
            $('.mask').click(function(){
                $(".pop_con").fadeOut()
            })  */

            //或者不用mask，用document
            $(document).click(function(){
                $(".pop_con").fadeOut()
            })
            //用document的话，要阻止冒泡，不然pop单击输入的时候，单击事件会向上传到最顶层document,而document有单击事件（淡出），所以不阻止冒泡，就会一单击input，弹框就淡出了
            $('.pop').click(function(){
                return false
            })

            $('.close').click(function(){
                $('.pop_con').fadeOut()
            })

        })

    </script>
    <style>

        .pop_con{display:none;}
        .pop{
            position: fixed;
            width:500px;
            height:300px;
            background-color:#fff;
            border:3px solid #000;
            left:50%;
            top:50%;
            margin-left: -250px;
            margin-top:-150px;
            z-index:999;
        }

        .mask{
            position:fixed;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.3;
            /*兼容ie*/
            filter:alpha(opacity=30);
            z-index: 998;
        }

        .close{
            /*float: right;*/
            position: absolute;
            right:0;
            top:0;
        }
    </style>
</head>
<body>
    <input type="button" value="弹出" id="btn">
    <div class="pop_con">
        <div class="pop">
            弹框文字
            投资金额：
            <input type="text">
            <a href="#" id="close" class="close">关闭</a>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

 

posted @ 2019-03-30 16:16  greenfan  阅读(469)  评论(0)    收藏  举报