什么时候用阻止事件冒泡

来源：互联网发布：怎么把淘宝差评师杀了编辑：程序博客网时间：2024/05/16 09:39

http://www.cnblogs.com/52css/p/3224809.html

什么时候用阻止事件冒泡

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

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

例子：

 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>

0 0