hunter
event.cancelBubble
关于event.cancelBubble2007-09-07 11:45由于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
language
="javascript"
>
<!--
function
tableA_rowA_click()
{
alert('tableA_rowA');
}
function
tableA_rowB_click()
{
alert('tableA_rowB');
event.cancelBubble
=
true
;
}
//
-->
</
script
>
event.cancelBubble阻止事件冒泡2007年07月02日 星期一 上午 11:17event.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:
<!
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"
lang
="zh"
xml:lang
="zh"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
/>
<
meta
name
="developer"
content
="Realazy"
/>
<
title
>
Bubble in JavaScript DOM--JavaScript 的事件冒泡 demo
</
title
>
<
style
type
="text/css"
media
="screen"
>
div *
{
}
{
display
:
block
;
margin
:
4px
;
padding
:
4px
;
border
:
1px solid white
;
}
textarea
{
}
{
width
:
20em
;
height
:
2em
;
}
</
style
>
<
script
type
="text/javascript"
>
//
<![CDATA[
function
init()
{
var
log
=
document.getElementsByTagName('textarea')[
0
];
var
all
=
document.getElementsByTagName('div')[
0
].getElementsByTagName('
*
');
for
(
var
i
=
0
, n
=
all.length; i
<
n;
++
i)
{
all[i].onmouseover
=
function
(e)
{
this
.style.border
=
'1px solid red';
log.value
=
'鼠标现在进入的是: '
+
this
.nodeName;
}
;
all[i].onmouseout
=
function
(e)
{
this
.style.border
=
'1px solid white';
}
;
}
var
all2
=
document.getElementsByTagName('div')[
1
].getElementsByTagName('
*
');
for
(
var
i
=
0
, n
=
all2.length; i
<
n;
++
i)
{
all2[i].onmouseover
=
function
(e)
{
this
.style.border
=
'1px solid red';
if
(e)
//
停止事件冒泡
e.stopPropagation();
else
window.event.cancelBubble
=
true
;
log.value
=
'鼠标现在进入的是: '
+
this
.nodeName;
}
;
all2[i].onmouseout
=
function
(e)
{
this
.style.border
=
'1px solid white';}
;
}
}
window.onload
=
init;
//
]]>
</
script
>
</
head
>
<
body
>
<
h1
>
Bubble in JavaScript DOM
</
h1
>
<
p
>
DOM树的结构是:
</
p
>
<
pre
><
code
>
UL
- LI
- A
- SPAN
</
code
></
pre
>
<
div
>
<
ul
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>
</
ul
>
</
div
>
<
textarea
></
textarea
>
<
p
>
鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(
<
code
>
mouseover
</
code
>
)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。
</
p
>
<
div
>
<
ul
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
</
span
></
a
><
input
type
="text"
value
="aaa"
></
li
>
<
li
><
a
href
="#"
><
span
>
Bubbllllllllllllllle
</
span
></
a
></
li
>
</
ul
>
</
div
>
<
p
>
如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。
</
p
>
</
body
>
</
html
>
文章来自网上。
posted on 2008-11-28 10:16
猎人
阅读(469)
评论(0)
编辑
收藏
所属分类:
js整理
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
Chat2DB
C++博客
博问
管理
相关文章:
测试一个页面功能
event.cancelBubble
Powered by:
BlogJava
Copyright © 猎人
<
2025年7月
>
日
一
二
三
四
五
六
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
导航
BlogJava
首页
新随笔
联系
聚合
管理
统计
随笔 - 0
文章 - 4
评论 - 0
引用 - 0
留言簿
给我留言
查看公开留言
查看私人留言
随笔分类
随笔
(rss)
文章分类
(4)
js整理(2)
(rss)
操作系统(1)
(rss)
数据库
(rss)
网站开发(1)
(rss)
文章档案
(4)
2008年11月 (4)
搜索
最新评论