关于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)     {     } }