- 功能：
- 了解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)
...{
}}