JS冒泡事件的快速解决方法
更新时间：2013年12月16日 08:47:44 作者：
这篇文章主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
何为冒泡事件
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果
复制代码 代码如下:
<html>
<head>
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）</title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
<p>This is parent1 div.</p>
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
<p>This is child1.</p>
</div>
<p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
<p>This is parent2 div.</p>
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
<p>This is child2. Will bubble.</p>
</div>
<p>This is parent2 div.</p>
</div>
</body>
</html>
把代码直接复制后，打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1
这就是冒泡事件
但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果.
您可能感兴趣的文章:
- js之事件冒泡和事件捕获详细介绍
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- javascript事件冒泡详解和捕获、阻止方法
- js冒泡、捕获事件及阻止冒泡方法详细总结
- js阻止冒泡及jquery阻止事件冒泡示例介绍
- zepto.js中tap事件阻止冒泡的实现方法
- js event事件的传递与冒泡处理
- JS阻止冒泡事件以及默认事件发生的简单方法
- js如何取消事件冒泡
- js事件监听机制(事件捕获)总结
- JavaScript 捕获窗口关闭事件
- Javascript 事件捕获的备忘(setCapture,captureEvents)
- JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
相关文章
javascript下利用arguments实现string.format函数
sitepoint上看到Andrew Tetlaw在08年写的文章arguments: A JavaScript Oddity，阅读之后，除了对arguments温故知新一遍以外，印象最深刻的还是Andrew的第一个函数实现的string.format功能。2010-08-08
本文主要介绍了js实现鼠标拖动功能的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了基于JavaScript实现熔岩灯效果导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了完美实现八种js焦点轮播图的具体代码，基于完美运动框架move2.js实现的焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
退出循环，使用break；退出当前循环继续下一个循环，使用continue，jquery中使用return false；continue，使用return true2014-09-09
本文主要分享了js封装一个tab切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了判断复选框是否被选中的两种方法，经测试还不错，大家可以学习下2014-06-06
使用webpack/gulp构建TypeScript项目的方法示例
这篇文章主要介绍了使用webpack/gulp构建TypeScript项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JS获得图片alt信息的方法,涉及javascript获取图片元素及对应alt属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
让JavaScript中setTimeout支持链式操作的方法
这篇文章主要介绍了让JavaScript中setTimeout支持链式操作的方法,本文直接给出代码实例,需要的朋友可以参考下2015-06-06
最新评论