event.cancelBubble的理解

本文详细介绍了HTML中事件冒泡的概念及使用方法,通过具体实例展示了如何利用event.cancelBubble属性来控制事件是否向上级元素传播。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于event.cancelBubble

由于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>
    <p></p>
</body>
</html>
<!--   -->
<script>
<!--function tableA_rowA_click(){alert('tableA_rowA');}
function tableA_rowB_click(){
alert(
'tableA_rowB');
event.cancelBubble
=true;
}
//-->
</script>
event.cancelBubble阻止事件冒泡   event.cancelBubble=true;
取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事 件;event.cancelBubble=true;可以停止事件继续上传补充一点,Ie的事件传递是从下到上的:
事件来源对象->上级对象->上上级对象->.....->body->document->window
NS的事件传递是从上到下:
window->document->body->....->事件来源对象实例源码如下:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>event.cancelBubble</title>
        <style>
            <!--* 
{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>
实例2:
<!DOCTYPE html >
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="developer" content="Realazy" />
        <title>Bubble in JavaScript DOM--JavaScript 的事件冒泡 </title>
        <style type="text/css" media="screen">
            div * 
{display:block; margin:4px; padding:4px; border:1px solid white;}
            textarea 
{width:20em; height:2em;}
        </style>
</head>
<script type="text/javascript">
      
//<![CDATA[
      function init(){
    
var log = document.getElementsByTagName('textarea')[0];
    
var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
    
for (var i = 0, n = all.length; i < n; ++i){
     all[i].onmouseover 
= function(e){
      
this.style.border = '1px solid red';
      log.value 
= '鼠标现在进入的是: ' + this.nodeName;
     };
     all[i].onmouseout 
= function(e){
      
this.style.border = '1px solid white';
     };
    }
    
var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
    
for (var i = 0, n = all2.length; i < n; ++i){
       all2[i].onmouseover 
= function(e){
      
this.style.border = '1px solid red';
      
if (e) //停止事件冒泡
       e.stopPropagation();
      
else
       window.event.cancelBubble 
= true;
      log.value 
= '鼠标现在进入的是: ' + this.nodeName;
     };
     all2[i].onmouseout 
= function(e){
      
this.style.border = '1px solid white';};
     }
    }
window.onload 
= init;
      
//]]>
</script>
<body>
    <h1>Bubble in JavaScript DOM</h1>
    <p>DOM树的结构是:</p>
    <pre><code>
    UL
        - LI
           - A
         - SPAN

    </
code></pre>
    <div>
        <ul>
            
<li><href="#"><span>Bubbllllllllllllllle</span></a></li>
            
<li><href="#"><span>Bubbllllllllllllllle</span></a></li>
        </ul>
    </div>
    <textarea></textarea>
    <p>鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停 (<code>mouseover</code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的 边。</p>
    <div>
        <ul>
            
<li><href="#"><span>Bubbllllllllllllllle</span></a></li>
            <li><href="#"><span>Bubbllllllllllllllle</span></a></li>
        </ul>
    </div>
    <p>如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。</p>
</
body>
</
html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值