jQuery 中的事件冒泡和阻止默认行为

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 });

此时点击内部 <span> 元素时,只会触发自身的 click 事件,不会再向上冒泡。

你可能感兴趣的:(jquery)