什么时候用阻止事件冒泡

什么时候用阻止事件冒泡？

例如：document上有A事件，div有B事件，div里面的span有C事件，如果不给span和div加阻止事件冒泡的话，点击span时就会触发到div的B事件、document的A事件，当点击span时不想触发div和document的事件就要加上阻止事件冒泡，div也是一样的道理。

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#btn{position:relative;}
div{position:absolute;top:40px;left:10px;width:200px;height:200px;display:none;background:#000;}
div a{color:#FFF;}
</style>
<script>
window.onload=function()
{
    var oBtn=document.getElementById('btn');
    var oDiv=document.getElementById('div');
    var oClose=document.getElementById('close');
    
    oBtn.onmouseover=function()
    {
        oDiv.style.display='block';
    };
    
    oDiv.onclick=function(ev)
    {
        var oEvent=ev||event;
        oDiv.style.display='block';
        oEvent.cancelBubble=true;
    };
    
    oClose.onclick=function(ev)
    {
        var oEvent=ev||event;
        oDiv.style.display='none';
        oEvent.cancelBubble=true;
    };
    
    document.onclick=function()
    {
        oDiv.style.display='none';
    };
};
</script>
</head>

<body>
<input id="btn" type="button" value="划过我就弹出" />
<div id="div">
    <a id="close" href="javascript:">关闭</a><br /><br />
    <input type="input" /><br />
    <input type="button" value="提交" />
</div>
</body>
</html>
View Code 
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #btn{position:relative;}
 8 div{position:absolute;top:40px;left:10px;width:200px;height:200px;display:none;background:#000;}
 9 div a{color:#FFF;}
10 </style>
11 <script>
12 window.onload=function()
13 {
14     var oBtn=document.getElementById('btn');
15     var oDiv=document.getElementById('div');
16     var oClose=document.getElementById('close');
17     
18     oBtn.onmouseover=function()
19     {
20         oDiv.style.display='block';
21     };
22     
23     oDiv.onclick=function(ev)
24     {
25         var oEvent=ev||event;
26         oDiv.style.display='block';
27         oEvent.cancelBubble=true;
28     };
29     
30     oClose.onclick=function(ev)
31     {
32         var oEvent=ev||event;
33         oDiv.style.display='none';
34         oEvent.cancelBubble=true;
35     };
36     
37     document.onclick=function()
38     {
39         oDiv.style.display='none';
40     };
41 };
42 </script>
43 </head>
44 
45 <body>
46 <input id="btn" type="button" value="划过我就弹出" />
47 <div id="div">
48     <a id="close" href="javascript:">关闭</a><br /><br />
49     <input type="input" /><br />
50     <input type="button" value="提交" />
51 </div>
52 </body>
53 </html>

 

posted @ 2013-07-30 11:44  yexingwen  阅读(4619)  评论(2)  编辑  收藏  举报