学习笔记(3)关于Js的enevt.cancelBubble的作用

• 功能：
• • 了解cancelBubble的作用。
  • 掌握cancelBubble的正确用法。 
• 说明：
• • 前两天无意中看到晓风残月大大的一篇关于给GridView/DataGrid加单击事件实现浏览详细内容，双击事件确发该行为编辑列的Demo（该文地址：http://www.cnblogs.com/Jinglecat/archive/2007/09/20/900645.html），对其中使用的enevt.Bubble的作用不了解，今天花了点时间Search了一下，写个小例子，帮助理解。

HTML

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " TestJsCancelBubbleSample.aspx.cs "  Inherits = " TestJsCancelBubbleSample "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head id = " Head1 "  runat = " server " >
     < title > 测试JS　CancelBubble的作用 </ title >
      < SCRIPT   LANGUAGE = " JScript " >    
  function   checkCancel()   
   ... {   
          if   (window.event.shiftKey)   
                  window.event.cancelBubble   =   true;   
          alert('Image   Click');   
  }    
  function   showSrc()   
   ... {   
          alert('Div   Click');   
  }    
   </ SCRIPT >    
</ head >
< body style = " font-size:12px; " >
     < form id = " form1 "  runat = " server " >
     < ul >
     < li >< span style = " font-size:14px; font-style:italic; font-weight: bold; " > Sample desciption </ span ></ li >
     < li > event .cancelBubble默认值为false,当一个元素，如下例中的IMG的事件被激活时，同时也会去激活它上面的元素如DIV的事件从下例中可以看到 </ li >
     < li > ，点击Img时确发了checkCancel()事件，然后又确发了DIV的onclick()事件,而当按下SHIFT时就将enevt.cancelBubble设为true,阻断了这种像 </ li >
     < li > 冒泡式的确发事件方式，所以cancelBubble的作用是： false ,支持冒泡确发上级元素的事件，True：阻断这种确发，只确发当前点击元素的事件 </ li >
     </ ul >
    
   < div   onclick = " showSrc() "    style = " background:brown " >    
   < img   onclick = " checkCancel() "    SRC = " sample.gif "  alt = " AAA " />
   < br />    
   < br />    
  Press   Shift   and   Click   Image   
   </ div >
     </ form >
</ body >
</ html >

cs code

public   partial   class  TestJsCancelBubbleSample : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
}