event.cancelBubble的理解[通俗易懂]-cancelbubble true

event.cancelBubble的理解[通俗易懂]关于event.cancelBubble由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TDBubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。例子：…

关于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：

<!
DOCTYPEhtml
>


<
html
>


<
head
>


<
meta
http-equiv
=”Content-Type”
content
=”text/html;charset=UTF-8″

/>


<
meta
name
=”developer”
content
=”Realazy”

/>


<
title
>
BubbleinJavaScriptDOM–JavaScript的事件冒泡
</
title
>


<
style
type
=”text/css”
media
=”screen”
>

p*
{

display
:
block
;
margin
:
4px
;
padding
:
4px
;
border
:
1pxsolidwhite
;
}

textarea
{

width
:
20em
;
height
:
2em
;
}


</
style
>

</head>

<
script
type
=”text/javascript”
>


//
<![CDATA[



function
init(){


var
log
=
document.getElementsByTagName(
‘
textarea
‘
)[
0
];

var
all
=
document.getElementsByTagName(
‘
p
‘
)[
0
].getElementsByTagName(
‘
*
‘
);

for
(
var
i
=

0
,n
=
all.length;i
<
n;
++
i){

all[i].onmouseover
=

function
(e){


this
.style.border
=

‘
1pxsolidred
‘
;
log.value
=

‘
鼠标现在进入的是：
‘

+

this
.nodeName;
};
all[i].onmouseout
=

function
(e){


this
.style.border
=

‘
1pxsolidwhite
‘
;
};
}

var
all2
=
document.getElementsByTagName(
‘
p
‘
)[
1
].getElementsByTagName(
‘
*
‘
);

for
(
var
i
=

0
,n
=
all2.length;i
<
n;
++
i){

all2[i].onmouseover
=

function
(e){


this
.style.border
=

‘
1pxsolidred
‘
;

if
(e)
//
停止事件冒泡


e.stopPropagation();

else

window.event.cancelBubble
=

true
;
log.value
=

‘
鼠标现在进入的是：
‘

+

this
.nodeName;
};
all2[i].onmouseout
=

function
(e){


this
.style.border
=

‘
1pxsolidwhite
‘
;};
}
}
window.onload
=
init;

//
]]>


</
script
>


<
body
>


<
h1
>
BubbleinJavaScriptDOM
</
h1
>


<
p
>
DOM树的结构是：
</
p
>


<
pre
><
code
>

UL
–LI
–A
–SPAN

</
code
></
pre
>


<
p
>


<
ul
>


<
li
><
a
href
=”#”
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>


<
li
><
a
href
=”#”
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>


</
ul
>


</
p
>


<
textarea
></
textarea
>


<
p
>
鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（
<
code
>
mouseover
</
code
>
）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。
</
p
>


<
p
>


<
ul
>


<
li
><
a
href
=”#”
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>


<
li
><
a
href
=”#”
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>


</
ul
>


</
p
>


<
p
>
如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。
</
p
>

</
body
>

</
html
>