JavaScript之阻止事件冒泡。
废话少说,直接上例子。
没有阻止事件冒泡的情况下的demo:
1 <!DOCTYPE html> 2 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>test</title> 7 <script type="text/javascript"> 8 function abc(e){ 9 //e.cancelBubble=true; 注意这里,事件冒泡被阻止了。 10 alert("inner"); 11 } 12 </script> 13 </head> 15 <body> 16 <div style="width: 200px; height: 200px; border: 1px solid blue; line-height: 200px; text-align: center;" onclick="alert('outer')"> 17 <div style="width: 100px; height: 100px; background-color: #eee; display: inline-block;vertical-align: middle; " onclick="abc(event)"></div> 18 </div> 19 </body> 21 </html>
运行结果:
接下来是阻止事件冒泡时候的运行截图,阻止事件冒泡只需把上面代码的第9行取消注释就可以啦。
阻止事件冒泡就这样轻松的实现啦。