1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之防止事件冒泡</title> 8 <style type="text/css"> 9 div, p, span { 10 border: 1px solid; 11 } 12 </style> 13 <script src="jquery-1.5.2.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(document).ready(function(){ 16 $('div').click(function(event){ 17 //target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。 18 var $target = $(event.target); 19 if($target.is('div')) { 20 alert("You've cliked the div element!"); 21 } 22 if($target.is('p')) { 23 alert("You've cliked the p element!"); 24 } 25 if($target.is('span')) { 26 alert("You've cliked the span element!"); 27 } 28 }); 29 }); 30 </script> 31 <body> 32 <div> 33 Div Element 34 <p>Pagraph Element</p> 35 <span>Span Element</span> 36 </div> 37 </body> 38 </html>