jQuery 中的事件冒泡和阻止默認行為 - PiaoMiaoGongZi－IT工程師數位筆記本

文章出處

1、事件冒泡

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9     <head>
10           <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
11         <script type="text/javascript">
12             $(function() {
13                 //為 <span> 元素綁定 click 事件
14                 $("span").click(function() {
15                     $("#msg").html($("#msg").html() + "<p>內層span元素被單擊</p>");
16                 });
17                 //為 Id 為 content 的 <div> 元素綁定 click 事件
18                 $("#content").click(function() {
19                     $("#msg").html($("#msg").html() + "<p>外層div元素被單擊</p>");
20                 });
21                 //為 <body> 元素綁定 click 事件
22                 $("body").click(function() {
23                     $("#msg").html($("#msg").html() + "<p>body元素被單擊</p>");
24                 });
25             });
26         </script>      
27         
28         <!-- CSS -->
29         <style type="text/css">
30             #content {
31                 background: #b17af5;
32             }        
33         </style>
34       </head>
35   
36       <!-- HTML -->
37       <body>
38           <div id="content">
39               外層div元素<br />
40               <span style="background: silver;">內層span元素</span><br />
41               外層div元素
42           </div><br />
43           <div id="msg"></div>
44       </body>
45 </html>

當點擊內部 <span> 元素時，會觸發自身及外層 <div> 和 <body> 的點擊事件，這就是事件冒泡引起的。事件會隨著 DOM 的層次結構依次向上傳播。

事件冒泡可能會引起意料之外的效果，有時候需要阻止事件的冒泡行為，使用 stopPropagation() 方法來實現。
修改 <span> 元素的 click 事件函數：

1 //為 <span> 元素綁定 click 事件
2 $("span").click(function(event) {    //為方法添加一個事件對象參數
3     $("#msg").html($("#msg").html() + "<p>內層span元素被單擊</p>");
4     event.stopPropagation();    //阻止 <span> 的 click 事件冒泡
5 });