<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Prevent Propagation</title> <style type="text/css"> #one{width: 100px;height: 100px;background-color: #0f0;} #two{width: 50px;height: 50px;background-color: #f00;} #stop{display: block;} </style> <script type="text/javascript"> var stopPrpagation=false; function listenEvent(eventTarget,eventType,eventHandler){ if(eventTarget.addEventListener){ eventTarget.addEventListener(eventType,eventHandler,false); }else if(eventType.attachEvent){ eventType="on"+eventType; eventTarget.attachEvent(eventType,eventHandler); }else{ eventTarget["on"+eventType]=eventHandler; } } function cancelPropagation(event){ if(event.stopPrpagation){ event.stopPrpagation(); }else{ event.cancelBubble=true; } } listenEvent(window,"load",function(){ listenEvent(document.getElementById("one"),"click", clickBoxOne); listenEvent(document.getElementById("two"),"click",clickBoxTwo); listenEvent(document.getElementById("stop"),"click",stopProp); }) function stopProp(){ stopPrpagation=true; } function clickBoxOne(evt){ alert("Hello from one!"); } function clickBoxTwo(evt){ alert("Hi from Two!"); if(stopPrpagation){ cancelPropagation(evt); } } </script> </head> <body> <div id="one"> <div id="two"> <p>Inner</p> </div> </div> <button id="stop">Stop Propagation</button> </body> </html>