event.cancelBubble的理解

最新推荐文章于 2021-08-12 19:59:35 发布

原创最新推荐文章于 2021-08-12 19:59:35 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #border #html #div #table

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文详细解释了event.cancelBubble属性的作用及使用方法，通过实例展示了如何阻止事件冒泡，适用于需要精确控制事件传播路径的场景。

event.cancelBubble的理解

关于event.cancelBubble2007-09-07 11:45由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。例子：

<html> <body> <table border="1" width="26%" id="tableA" onclick="alert('tableA')"> <tr onclick="tableA_rowA_click()"> <td width="106">一般</td> </tr> <tr onclick="tableA_rowB_click()"> <td width="106">阻止消息上传</td> </tr> </table> </body> </html>  <mce:script language="javascript"></mce:script>

取消事件冒泡: 在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true;可以停止事件继续上传. 补充一点，Ie的事件传递是从下到上的：事件来源对象->上级对象->上上级对象->.....->body->document->window . 例子：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>event.cancelBubble</title> <mce:style></mce:style><style mce_bogus="1"> * {font:menu}</style> </head> <body> <span onclick=alert("你好")>点我 <span>再点我</span></span><br><br> <span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span> </body> </html>

下面再看一个例子：

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo　</title> <mce:style type="text/css" media="screen"></mce:style><style type="text/css" media="screen" mce_bogus="1"> div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; height:2em;} </style> <mce:script type="text/javascript"></mce:script> </head> <body> <h1>Bubble in JavaScript DOM</h1> <p>DOM树的结构是：</p> <pre><code> UL - LI - A - SPAN </code></pre> <div> <ul> <li><a href="#" mce_href="#"><span>Bubbllllllllllllllle</span></a></li> <li><a href="#" mce_href="#"><span>Bubbllllllllllllllle</span></a></li> </ul> </div> <textarea></textarea></p> <p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p> <div> <ul> <li><a href="#" mce_href="#">Bubbllllllllllllllle</a></li> <li><a href="#" mce_href="#">Bubbllllllllllllllle</a></li> </ul> </div> <p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p></body> </html>