首先了解什么是事件冒泡什么是事件捕获
注：图片来自博客http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html
实例代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <style type="text/css"> #content{width: 150px;height: 150px;background-color: red;} #btn{width: 80px;height: 80px;background-color: green;} </style> </head> <body> <div id="content">content <div id="btn">button</div> </div> <script type="text/javascript"> var content = document.getElementById("content"); var btn = document.getElementById('btn'); btn.onclick = function(e){ alert("btn"); // 阻止事件冒泡 var ev=e?e:window.event;//兼容IE写法，window.event获取IE时间源 window.event?window.event.cancelBubble=true:e.stopPropagation(); }; content.onclick = function(){ alert("content"); }; document.onclick = function(){ alert("document"); }; document.oncontextmenu = function(e){ // alert("document"); // 阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ window.event.returnValue = false; return false; } } // 事件冒泡btn——>content——>document </script> </body> </html>
