网页中双击事件 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 6     <style type="text/css">
 7         *{margin:0px;padding:0px;}
 8         body{font-size:12px;}
 9         
10         .box{margin:10px;padding:10px;}
11         .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
12         .box p{line-height:20px;}
13         
14         #allbox{margin:10px;padding:10px;}
15         #allbox div{border:5px solid #aaccff;margin-top:10px;height:50px;}
16         
17     </style>
18     <script type="text/javascript">
19         $(function(){
20            $("#allbox div").dblclick(function(){
21                //this 指代当前双击的对象
22                //弹出对话框，确认时候返回true,取消返回false,为true时候执行删除
23                var result = window.confirm("确认删除吗？");
24                if( result==true){
25                $(this).remove();
26                }
27 
28            });
29 
30         });
31 
32     </script>
33 
34 
35 </head>
36 <body>
37     <div class="box">
38         <h3>试题要求</h3>
39         <p>
40             1.双击allbox的每一个子div时，将被双击的div从界面中删除掉<br />
41             2.删除前弹出确认对话框，确定删除后再执行删除操作
42 
43         </p>
44     </div>
45 
46     <div id="allbox">
47         <div>box1</div>
48         <div>box2</div>
49         <div>box3</div>
50         <div>box4</div>
51         <div>box5</div>
52         <div>box6</div>
53     </div>
54 
55 
56 </body>
57 </html>

 

posted @ 2015-12-11 23:37  胡洋  阅读(498)  评论(0)    收藏  举报