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

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

转载于:https://www.cnblogs.com/pebbler/articles/5622256.html

JavaScript之阻止事件冒泡。相关推荐

JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
javascript如何阻止事件冒泡和默认行为
阻止冒泡: 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而以引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷.下面的demo 就 ...
jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单 $(document).ready(function(){$(document).bind("contextmenu",function(e){retur ...
javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡
回到页面顶部demo <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
利用事件冒泡和阻止事件冒泡的例子
利用事件冒泡机制页面中的评分界面,大家一定都很熟悉,现在假如我开了一家饭店,我需要一个在我们的网页上能让顾客对我的饭店进行打分.首先,我们需要两张星星的图片,一张是灰的的星星,一张是黄色的星星,我们 ...
阻止事件冒泡——商品编辑
阻止事件冒泡冒泡事件流当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此 ...
Javascript中的事件冒泡
这是一个基础性的文章,使用Javascript观察DOM中的事件冒泡机制,并介绍如何阻止默认行为和如何组织事件冒泡的方法. 1. 第一个例子可以在Firefox下运行 <div id=" ...

JavaScript之阻止事件冒泡。

JavaScript之阻止事件冒泡。相关推荐

最新文章

热门文章