- 功能:
- 了解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 >
<! 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)
...{
}
}
... {
protected void Page_Load(object sender, EventArgs e)
...{
}
}