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>

 

posted on 2017-01-21 22:26  Sharpest  阅读(147)  评论(0编辑  收藏  举报