事件冒泡
2012-03-17 00:35
148 查看
【不想激活的事件被激活例子】
【阻止事件冒泡例子】
参考:http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html
http://www.blueidea.com/tech/web/2007/4628.asp
<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //本例你实际希望点击灰色盒子打开google首页,而点击黑色盒子打开baidu首页,但结果你点击灰色盒子的时候,却是同时打开了两个网页。其实在实际设计中较少遇到此问题,你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接,深层处的事件触发会不会波及顶层的按钮呢?不会,因为按钮不能形成嵌套关系。 function openWin(url) { window.open(url); } </script>
【阻止事件冒泡例子】
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> <div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div> </div> <script type="text/javascript"> //阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比) function showMsg(obj,e) { alert(obj.id); stopBubble(e) } //阻止事件冒泡函数 function stopBubble(e) { if (e && e.stopPropagation) e.stopPropagation() //支持FF else window.event.cancelBubble=true //支持IE } </script>
参考:http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html
http://www.blueidea.com/tech/web/2007/4628.asp
相关文章推荐
- [转] js 事件冒泡 阻止
- js事件处理模型——事件冒泡、捕获
- Jquery阻止事件冒泡
- 事件冒泡
- 为D3.js中的drag、zoom阻止冒泡和默认事件
- NO.48 Javascript中的事件冒泡
- vue,事件冒泡与取消默认事件
- js事件冒泡
- JS阻止冒泡事件
- js:事件冒泡和时间捕获详解
- C# 事件穿透 事件冒泡 鼠标点击后在父级控件捕获
- JS阻止事件冒泡的3种方法之间的不同
- AngularJs 阻止事件运行,防止冒泡穿透事件
- JS冒泡事件与处理
- Javascript事件模型:事件捕获和事件冒泡
- W3C下的冒泡和捕获机制。到底是冒泡呢。还是捕获呢。一个DOM元素绑定多个事件时如何执行。
- javascript mouseover、mouseout停止事件冒泡的解决方案
- react阻止冒泡事件
- WPF(二)路由事件1.冒泡路由事件
- JS事件冒泡的阻止代码