javascript阻止事件冒泡和浏览器的默认行为

1.阻止事件冒泡,使成为捕获型事件触发机制.

复制代码
1 function stopBubble(e) { 
2 //如果提供了事件对象，则这是一个非IE浏览器 
3 if ( e && e.stopPropagation ) 
4     //因此它支持W3C的stopPropagation()方法 
5     e.stopPropagation(); 
6 else
7     //否则，我们需要使用IE的方式来取消事件冒泡 
8     window.event.cancelBubble = true; 
9 }
复制代码

2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

复制代码
 1 //阻止浏览器的默认行为 
 2 function stopDefault( e ) { 
 3     //阻止默认浏览器动作(W3C) 
 4     if ( e && e.preventDefault ) 
 5         e.preventDefault(); 
 6     //IE中阻止函数器默认动作的方式 
 7     else
 8         window.event.returnValue = false; 
 9     return false; 
10 }
复制代码

那么通过下面的一段代码我们来看下函数一的效果:

复制代码
 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  
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <title>效果测试</title>
 7 <script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
 8 <script language="javascript" type="text/javascript">
 9 $(document).ready(function()
10 {
11 $('div.c1').click(function(e){alert('单击了div');});
12 $('div.c2').click(function(e){alert('单击了div');stopBubble(e);});
13 $(document).click(function(e){alert('单击了document');});
14 $('#txt1').val('123');
15 $('#txt1').click(function(e){stopBubble(e);});
16 $('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
17 })
18  
19 function stopBubble(e) { 
20 //如果提供了事件对象，则这是一个非IE浏览器 
21     if ( e && e.stopPropagation ) 
22     //因此它支持W3C的stopPropagation()方法 
23     e.stopPropagation(); 
24      else 
25     //否则，我们需要使用IE的方式来取消事件冒泡 
26     window.event.cancelBubble = true; 
27 } 
28 //阻止浏览器的默认行为 
29 function stopDefault( e ) { 
30     //阻止默认浏览器动作(W3C) 
31     if ( e && e.preventDefault ) 
32         e.preventDefault(); 
33     //IE中阻止函数器默认动作的方式 
34     else 
35         window.event.returnValue = false; 
36     return false; 
37 }
38 </script>
39 <style type="text/css">
40 body{
41 font-size:14px;
42     }
43 }
44 .c1{
45     font-family:"Arial Unicode MS"
46     }
47 .c2{
48     font-family:helvetica,simsun,arial,clean
49     }
50 </style>
51 </head>
52  
53 <body>
54  
55 <div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
56  
57 <div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
58  
59 <div><input id="txt1" name="Text1" type="text" /></div><hr/>
60  
61 </body>
62 </html>
复制代码
posted @ 2017-07-21 17:08  范少坤  阅读(164)  评论(0)    收藏  举报