什么是冒泡
在页面上有多个事件，也可以多个元素响应同一个事件。假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。
例如：
|
1 2 3 4 5 |
<body> <div> <span></span> </div> </body> |
若没有做事件冒泡处理，当只单击span元素时，也会触发外部<div>元素和<body>元素上绑定的click事件，这是由事件冒泡引起的。
元素的click事件会按照一下顺序“冒泡”：1.<span> 2.<div> 3.<body>
之所以称为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。
如何阻止
事件冒泡可能会引起预料之外的效果，所有有必要进行阻止。
先介绍几个与事件有关的方法
1、cancelBubble（HTML DOM Event 对象属性） ：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
3、 preventDefault（HTML DOM Event 对象方法）：通知浏览器不要执行与事件关联的默认动作。
4、return false： 同时对事件对象阻止冒泡和默认行为（这是在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!doctype html> <html lang="en"> <head> <title> JavaScript阻止时间冒泡传递测试 </title> <style> div{padding:10px; border:1px solid #EEE;margin:10px;} </style> </head> <body onclick="alert('Body Click');"> 这是顶层Body <div onclick="alert('Div 1 Click');"> 这是第1层 <div onclick="alert('Div 2A Click');">这是第2层A <input type="button" onclick="alert('Button Click');stopBubble(event)" value="点击测试时间冒泡(阻止)！" /> </div> <div onclick="alert('Div 2B Click');">这是第2层B <input type="button" onclick="alert('Button Click');" value="点击测试时间冒泡(未阻止)！" /> </div> </div> <script type="text/javascript"> var all = document.getElementsByTagName("*"); for (var i = 0; i < all.length; i++) { //监听用户鼠标,当移动到元素上时 //为元素加上红色边框 all[i].onmouseover = function(ev) { this.style.border="1px solid red"; stopBubble(ev); } //检查用户鼠标,当移开元素时 //删除我们加上的边框 all[i].onmouseout = function(ev) { this.style.border = "1px solid #EEE"; stopBubble(ev); } } function stopBubble(ev) { var oEvent= ev||event; if (window.event) { // IE oEvent.cancelBubble = true; } else { // FF //oEvent.preventDefault(); oEvent.stopPropagation(); } } </script> </body> </html> |
当然，从程序中可以看到存在兼容性问题。IE低版本支持cancelBubble，不支持stopPrapagation。不过cancelBubble不是w3c标准，但chrome也支持事件的cancelBubble。
所以可以整理成一个事件冒泡函数
|
1 2 3 4 5 6 7 8 9 10 |
function stopBubble(ev) { var oEvent= ev||event; if (window.event) { // IE oEvent.cancelBubble = true; } else { // FF //oEvent.preventDefault(); oEvent.stopPropagation(); } } |
羊眼圈…
苍天有眼啊,让我在有生之年得以观得如此精彩绝伦的帖子。…