View on GitHub

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行取消注释就可以啦。

阻止事件冒泡就这样轻松的实现啦。

posted @ 2016-06-28 09:17  pebbler  阅读(149)  评论(0编辑  收藏  举报