标签：jQuery function 第二十六 click height 冒泡 background alert event
1 <!-- 什么是事件冒泡：在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么次事件就会调用这个处理程序，如果没有定义次事件的处理程序或者事件返回true，那么这个事件就会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
2
3 冒泡事件的作用：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父元素上，避免把事件处理器添加到多个子元素上），它还可以让你在对象层的不同级别捕获事件。
4
5 阻止事件冒泡：事件冒泡的机制有时候是不需要的，需要阻止掉，通过event.StopPropagation()来阻止 -->
6
7
8 <!DOCTYPE html>
9 <html lang="en">
10 <head>
11 <meta charset="UTF-8">
12 <title>Document</title>
13 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
14 <script type="text/javascript">
15 $(function(){
16 $('.son').click(function(event){
17 // event参数表示代表事件本身的对象，通过第一个参数传递；
18 alert('1');
19
20 // event.stopPropagatio阻止事件冒泡；
21 event.stopPropagation();
22 // 阻止默认行为（如表单提交）
23 envnt.preventDefault();
24
25 return false;
26 // 上面两个可以合并成这个，既可以阻止事件冒泡，又可以阻止默认行为
27 })
28
29 $('.father').click(function(){
30 alert('2');
31 })
32
33 $('.grandfather').click(function(){
34 alert('3');
35 })
36
37
38 // document 是最顶级的标签，比body还大
39 $(document).click(function(){
40 alert('4');
41 });
42 });
43 </script>
44 <style type="text/css">
45 .grandfather{
46 width: 300px;
47 height: 300px;
48 background-color: green;
49 }
50 .father{
51 width: 200px;
52 height: 200px;
53 background-color: gold;
54 }
55 .son{
56 width: 100px;
57 height: 100px;
58 background-color: red;
59 }
60 </style>
61 </head>
62 <body>
63 <div class="grandfather">
64 <div class="father">
65 <div class="son"></div>
66 </div>
67 </div>
68 </body>
69 </html>
标签：jQuery,function,第二十六,click,height,冒泡,background,alert,event 来源： https://www.cnblogs.com/kogmaw/p/12493814.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。