jquery--事件冒泡/页面弹框实例

事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

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

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为
阻止右键菜单 

$(document).contextmenu(function(event) {
    event.preventDefault();
});

合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用 

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
    <style type="text/css">
        .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:500px;
        }
    </style>

    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.body').click(function(){
                alert('4');
            })

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

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

            //假如不阻止冒泡机制，点击son会依次弹出1,2,3,4
            $('.son').click(function(event){
                alert('1');

                //console.log(event);  //打印event事件日志
                //alert(event.clientX);

                //event.stopPropagation()   //阻止事件冒泡机制，点击son只弹出1
                return false;       //等价于ev.stopPropagation()
            })


            //阻止右键菜单
            $(document).contextmenu(function(ev){
                //ev.preventDefault();  //阻止默认行为
                return false;      //等价于ev.preventDefault();
            })
        })
    </script>
</head>
<body>

    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

</body>
</html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>弹框--阻止冒泡</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             $('#btn').click(function(){
14                 $('#pop').show();   //受下面$(document).click影响，如果不阻止冒泡机制，点击btn将不会弹出pop框
15                 return false;     //阻止冒泡机制
16             })
17 
18             $('#closeoff').click(function(){
19                 $('#pop').hide();
20             })
21 
22             $(document).click(function(){
23                 //setTimeout(function(){$('#pop').hide();},2000)
24                 $('#pop').hide();
25             })
26 
27             $('.pop').click(function(){
28                 return false;    //如果不阻止冒泡机制，点击pop页面会隐藏
29             })
30         })
31     </script>
32 
33     <style type="text/css">
34         .pop_con{
35             display:none;
36         }
37 
38         .pop{
39             width:400px;
40             height:300px;
41             background-color:#fff;
42             border:1px solid #000;
43             position:fixed;
44             left:50%;
45             top:50%;
46             margin-top:-150px;
47             margin-left:-200px;
48             z-index:999;  #设置层级
49         }
50 
51         .mask{
52             width:100%;
53             height:100%;
54             background-color:#000;
55             position:fixed;
56             left:0;
57             top:0;
58             opacity:30%; #设置透明度
59             z-index:990;  #设置层级
60         }
61 
62     </style>
63 
64 </head>
65 <body>
66 
67     <h1>首页标题</h1>
68     <p>页面内容</p>
69 
70     <input type="button" name="" value="弹出" id="btn">
71 
72     <div class="pop_con" id="pop">
73         <div class="pop">
74             <h3>提示信息！</h3>
75             <a href="#" id="closeoff">关闭</a>
76             <br>
77             <input type="text" name="">
78         </div>
79 
80         <div class="mask"></div>
81     </div>
82 
83 </body>
84 </html>

posted on 2019-12-24 22:01  cherry_ning  阅读(445)  评论(0)    收藏  举报

导航